     <!-- cashier Action Sheet -->
        <div class="modal fade action-sheet" id="cashierActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Select Action</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                               
                                
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * cashier Action Sheet -->
        
<!-- Accounts Section -->
<div id="cashierSection" class="admin-section section mt-1" style="display:none;">

    <!-- Skeleton -->
    <div class="skeleton-wrapper">
        <div class="skeleton-box"></div>
        <div class="skeleton-box"></div>
    </div>

    <div class="section-heading">
        <h3 class="link text-dark">Accounts</h3>
        <a href="#" data-toggle="modal" 
           data-target="#PanelRight_1" 
           class="link text-danger">
           More+..
        </a>
    </div>

    
    <div class="screen-wrapper">
        
        
<!-- card block -->
 <div class="table-container">
                            <div class="card-block bg-primary">
                                <div class="card-main">
                                  
                                    <div class="balance">
                                        <span class="label">CASH BALANCE</span>
                                        <h1 class="title">
                                        <span class="currency">UGX</span> 
                                        <span id="cash_acc_bl">0</span>
                                    </h1>
                                    </div>
                                    <div class="in">
                                        <div class="card-number">
                                            <span class="label">BANKED TODAY</span>
                                        <span class="currency">UGX</span> 
                                        <span id="bnkd_today">0</span>
                                        </div>
                                        <div class="bottom">
                                            <div class="card-expiry">
                                                <span class="label">TRANSFERS OUT</span>
                                        <span class="currency">UGX</span> 
                                        <span id="ctfr_out_today">0</span>
                                            </div>
                                            
                                                <div class="card-expiry">
                                                <span class="label">TRANSFERS IN</span>
                                        <span class="currency">UGX</span> 
                                        <span id="ctfr_in_today">0</span>
                                            </div>
                                            
                                            <div class="card-ccv">
                                                <span class="label">EXPENSES</span>
                                        <span class="currency">UGX</span> 
                                        <span id="exp_today">0</span>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          
                            
  </div>
              <!-- * card block -->


    
 <!-- Pending -->
    <div class="table-container">
        <!-- Loader -->
<div id="cashLoaderpending" class="text-center mt-1">
    <div class="spinner-grow text-warning" role="status"></div>
  
</div>
         <!-- Pending cash transaction Content -->
    <div class="pend-cash-transactions" style="display:none;">
     <div class="section-title">
            <h6>Pending Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="PcshScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="pendingcash"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Pending cash transaction Content -->
    
  </div>  
  
     <div class="table-container">     
    <div class="charts-wrapper mt-1">

    <!-- Daily Revenue -->
    <div class="chart-card">
        <h6>Daily Revenue</h6>
    <div class="chart-loader text-center mt-1" id="dailyLoader">
        <div class="spinner-grow text-warning"></div>
    </div>
    
        <canvas id="dailyRevenueChart"></canvas>
    </div>

    <!-- Pending vs Collected -->
    <div class="chart-card">
        <h6>Sales vs Collected</h6>
    <div class="chart-loader text-center mt-1" id="statusLoader">
        <div class="spinner-grow text-pink"></div>
    </div>
        <canvas id="statusChart"></canvas>
    </div>

</div>
 </div>

 <!-- Today -->
    <div class="table-container">
    <!-- Loader -->
<div id="cashLoader" class="text-center mt-1">
    <div class="spinner-grow text-primary" role="status"></div>
 
</div>

       

    <!-- Today's cash transaction Content -->
    <div class="cash-transactions mt-2" style="display:none;">
     <div class="section-title">
            <h6>Today's Transactions</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="cshScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doc No</th>
                            <th>Name</th>
                            <th>T.Type</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="todayscash"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Today's cash transaction Content -->
    
</div>


 <!-- Accounts -->
    <div class="table-container">
    <!-- Loader -->
<div id="accountsLoader" class="text-center mt-1">
    <div class="spinner-grow text-primary" role="status"></div>
 
</div>

       

    <!-- Accounts Content -->
    <div id="accountsbalances" class="accounts-balances mt-2" style="display:none;">
     <div class="section-title">
            <h6>Bank & Cash Accounts</h6>
        </div>
        <div class="card">
            <div class="table-responsive" id="accsScroll" style="max-height:400; overflow-y:auto;">
                <table class="table">
                  
                    <tbody id="accounts"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- Accounts Content -->
    
</div>


    
</div><!-- End of screen wrapper -->

</div> <!-- accountsSection -->