<style type="text/css">
.vertical-timeline-content::before{display: none;}
    .custom-col{padding: 2px !important;}
    #vertical-timeline {
        position: relative;
        padding: 0;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .vertical-container{width: 100% !important; max-width: 100% !important;}
    .vertical-timeline-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 12px;
        border: 3px solid #f1f1f1;
        text-align: center;
    }
    .vertical-timeline-icon i{margin-top: -5px !important;}
    #vertical-timeline::before{left: 13px !important;}
    .vertical-timeline-content{margin-left: 40px !important; padding: 0.5em; font-size: 12px;}
    .client-detail .vertical-timeline-content p{font-size: 12px; cursor: pointer;}
    /*.dark-timeline .vertical-timeline-content, .dark-timeline.center-orientation .vertical-timeline-content{background: #fff;}*/
    /*RTL STYLING FOR DASHBOARD*/
    body.rtls .vertical-timeline-icon{left: 88% !important; z-index: 1;}
    body.rtls #vertical-timeline::before{left: 93% !important;}
    body.rtls .vertical-timeline-content{margin-right: 40px !important; margin-left: 0px !important;}
    body.rtls .slimScrollBar{right: 97% !important;}
    body.rtls .vertical-timeline-content .vertical-date{float: right;}
</style>
<div class="row" style="background: #f6f6f6; padding: 5px;">
    <div class="col-md-9 b-r">
          <div class="row desktop-view-cash-marque" style="margin-bottom: 7px;">
                <div class="col-md-12 b-r">
                      <div class="row">
                            <div class="col-md-1 report-btn-db">
                                  <a href="<?= url('/reports/accounts?type=cashbook&currency=usd'); ?>" class="btn btn-primary sm db-cash-report" style="writing-mode: vertical-lr; padding: 7.5px 15px;"><?= print_lang($app_lang,'dashboard_cash_btn'); ?></a>
                            </div>
                            <div class="col-md-11" style="background: #2b9c1b; color: #fff;">
                                  <div class="row">
                                        <div class="col-md-12" style="padding: 0;">
                                              <h4 style="width: 18%; margin: 0; padding: 8px; background: #4ecd3c; display: block;float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>"><?= print_lang($app_lang,'current_cash'); ?></h4>
                                              <marquee style="margin-top: 4px;" class="cash-marque" width="82%" direction="<?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>" height="20px" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
                                                    <?php foreach($cash_stats['today']['currencies'] as $today_cash_currency){ ?>
                                                        <span style="display: inline-block; width: 150px;"><?= amount_number_format( $today_cash_currency['stats'] ); ?> <?= $today_cash_currency['name']; ?></span>
                                                    <?php } ?>
                                              </marquee>
                                        </div>
                                  </div>
                                  <div class="row">
                                        <div class="col-md-12" style="padding: 0;">
                                              <div class="db-current-cash">
                                                    <h4 style="width: 18%; margin: 0; padding: 8px; background: #4ecd3c; display: block;float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>;"><?= print_lang($app_lang,'yesterday_cash'); ?></h4>
                                                    <marquee style="margin-top: 4px;" class="cash-marque" width="82%" direction="<?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>" height="20px" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
                                                          <?php foreach($cash_stats['yesterday']['currencies'] as $overall_cash_currency){ ?>
                                                                <span style="display: inline-block; width: 150px;"><?= amount_number_format( $overall_cash_currency['stats'] ); ?> <?= $overall_cash_currency['name']; ?></span>
                                                          <?php } ?>
                                                    </marquee>
                                              </div>
                                        </div>
                                  </div>
                            </div>
                      </div>
                </div>
          </div>

          <!-- MOBILE MARQUE FOR CURRENT YESTERDAY CASH -->
          <div class="row mobile-view-cash-marque" style="margin-bottom: 7px;">
                <div class="col-md-12 b-r">
                      <div class="row">
                            <div class="col-md-1 report-btn-db">
                                  <a href="<?= url('/reports/accounts?type=cashbook&currency=usd'); ?>" class="btn btn-primary sm db-cash-report" style="writing-mode: vertical-lr; padding: 7px 13px;"><?= print_lang($app_lang,'dashboard_cash_btn'); ?></a>
                            </div>
                            <div class="col-md-11" style="background: #2b9c1b; color: #fff;">
                                  <div class="row">
                                        <div class="col-md-12" style="padding: 0;">
                                              <h4 style="width: 40%; margin: 0; padding: 8px; background: #4ecd3c; display: block;float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>"><?= print_lang($app_lang,'current_cash'); ?></h4>
                                              <marquee style="margin-top: 4px;" class="cash-marque" width="60%" direction="<?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>" height="20px" scrolldelay="2" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
                                                    <?php foreach($cash_stats['today']['currencies'] as $today_cash_currency){ ?>
                                                        <span style="display: inline-block; width: 100px;"><?= amount_number_format( $today_cash_currency['stats'] ); ?> <?= $today_cash_currency['name']; ?></span>
                                                    <?php } ?>
                                              </marquee>
                                        </div>
                                  </div>
                                  <div class="row">
                                        <div class="col-md-12" style="padding: 0;">
                                              <div class="db-current-cash">
                                                    <h4 style="width: 40%; margin: 0; padding: 8px; background: #4ecd3c; display: block;float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>;"><?= print_lang($app_lang,'yesterday_cash'); ?></h4>
                                                    <marquee style="margin-top: 4px;" class="cash-marque" width="60%" direction="<?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>" height="20px" scrolldelay="2" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
                                                          <?php foreach($cash_stats['yesterday']['currencies'] as $overall_cash_currency){ ?>
                                                                <span style="display: inline-block; width: 100px;"><?= amount_number_format( $overall_cash_currency['stats'] ); ?> <?= $overall_cash_currency['name']; ?></span>
                                                          <?php } ?>
                                                    </marquee>
                                              </div>
                                        </div>
                                  </div>
                            </div>
                      </div>
                </div>
          </div>
          <!-- MOBILE MARQUE FOR CURRENT YESTERDAY CASH -->
        <!-- Widgets Row TODAY AND BUSSINESS OVERVIEW -->
        <div class="row">
            <div class="col-md-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><?= print_lang($app_lang,'dashboard_today_overview'); ?></h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_sales'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['sales']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['today']['sales']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_profit'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['profit']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['today']['profit']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_sales_return'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['sales_return']) ? $dashboard_stats['today']['sales_return'] : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_purchases'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['purchases']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['today']['purchases']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_expenses'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['expenses']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['expenses']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_supplier_paid'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['supplier_paid']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['supplier_paid']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_client_recieved'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['client_received']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['client_received']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_cash_in'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['cash_in']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['cash_in']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_cash_out'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['cash_out']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['cash_out']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_extra_income'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['extra_income']) ? array_sum($dashboard_stats['today']['extra_income']) : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_bank_in'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['bank_in']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['bank_in']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_bank_out'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['today']['bank_out']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['today']['bank_out']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><?= print_lang($app_lang,'dashboard_business_overview'); ?></h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_sales'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['sales']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['overall']['sales']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_profit'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['profit']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['overall']['profit']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_purchases'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['purchases']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['overall']['purchases']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_current_stock'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['current_stock']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['overall']['current_stock']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_recievable'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['receivable']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['overall']['receivable']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_payable'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['payable']['currencies'][$dashboard_currency]['payable']) ? array_sum($dashboard_stats['overall']['payable']['currencies'][$dashboard_currency]['payable']) : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_cash'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['cash']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['overall']['cash']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_bank'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['bank']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['overall']['bank']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_expenses'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['expenses']['currencies'][$dashboard_currency]['stats']) ? $dashboard_stats['overall']['expenses']['currencies'][$dashboard_currency]['stats'] : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_damage_stock'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['damage_stock']['currencies'][$dashboard_currency]['stock_cost']) ? array_sum($dashboard_stats['overall']['damage_stock']['currencies'][$dashboard_currency]['stock_cost']) : 0 ); ?></h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_fixed_assets'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['fixed_assets']['currencies'][$dashboard_currency]['asset_amount']) ? array_sum($dashboard_stats['overall']['fixed_assets']['currencies'][$dashboard_currency]['asset_amount']) : 0 ); ?></h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label"><?= print_lang($app_lang,'dashboard_equity'); ?></small>
                                <h4><?= amount_number_format( isset($dashboard_stats['overall']['equity']['currencies'][$dashboard_currency]['equity']) ? $dashboard_stats['overall']['equity']['currencies'][$dashboard_currency]['equity'] : 0 ); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Widgets Row TODAY AND BUSSINESS OVERVIEW -->

        <!-- RECIVEVED PAYABLE AND RECIEVEABLE ROW -->

        <div class="row">
            <div class="col-md-12">
                <div class="progress_bar_recievable bg-warning" style="width: 30%; height: 40px; display: block; float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>;"></div>
                <div class="progress_bar_recievable bg-danger" style="width: 30%; height: 40px; display: block; float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>;"></div>
                <div class="progress_bar_recievable bg-primary" style="width: 40%; height: 40px; display: block; float: <?php if($app_direction == 'rtl'){ echo 'right'; }else{ echo 'left'; } ?>;"></div>
            </div>
            <div class="col-md-12">
                <div class="row" style="background: #fff; margin: 0 auto;">
                    <div class="col-md-4">
                        <div class="ibox-content">
                            <h2 class="no-margins" style="margin-bottom: 8px;">106,120</h2>
                            <small style="font-size: 15px; font-weight: 700;">Recievable</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="ibox-content">
                            <h2 class="no-margins" style="margin-bottom: 8px;">106,120</h2>
                            <small style="font-size: 15px; font-weight: 700;">Payable</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="ibox-content">
                            <h2 class="no-margins" style="margin-bottom: 8px;">106,120</h2>
                            <small style="font-size: 15px; font-weight: 700;">Recieved</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- RECIVEVED PAYABLE AND RECIEVEABLE ROW -->

        <!-- EXPENSE SECTION ROW -->

        <div class="row" style="background: #fff; margin: 20px auto; padding: 10px 0px;">
            <div class="col-md-12">
                <div class="row">
                    <!-- Expense Total AMount -->
                    <div class="col-md-3">
                        <h2 style="font-weight: 900;">Expenses</h2>
                        <span style="font-size: 20px; font-weight: 600;">$500000</span>
                    </div>
                    <!-- Expense Total AMount -->

                    <!-- Expense Types AMount -->
                    <div class="col-md-6 custom-col" style="margin-top: 20px;">
                        <div class="row">
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-danger m-r-sm"></span><span style="font-size: 12px;">$ 2000 Office Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-warning m-r-sm"></span><span style="font-size: 12px;">$ 2000 Salary Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-success m-r-sm"></span><span style="font-size: 12px;">$ 2000 Home Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-primary m-r-sm"></span><span style="font-size: 12px;">$ 2000 Transit Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-info m-r-sm"></span><span style="font-size: 12px;">$ 2000 Rent Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-danger m-r-sm"></span><span style="font-size: 12px;">$ 2000 Any Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-success m-r-sm"></span><span style="font-size: 12px;">$ 2000 Lunch Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-warning m-r-sm"></span><span style="font-size: 12px;">$ 2000 Fuel Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-info m-r-sm"></span><span style="font-size: 12px;">$ 2000 Electricity Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-primary m-r-sm"></span><span style="font-size: 12px;">$ 2000 Labour Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-success m-r-sm"></span><span>$ 2000 Car Expense</span>
                            </div>
                            <div class="col-md-6 custom-col">
                                <span class="btn btn-info m-r-sm"></span><span>$ 2000 Office Expense</span>
                            </div>
                        </div>
                    </div>
                    <!-- Expense Types AMount -->

                    <!-- Expense Chart Col -->
                    <div class="col-md-3 custom-col text-center">
                        <canvas id="expense-graph" width="175" height="175" style="margin: 0 auto;"></canvas>
                    </div>
                    <!-- Expense Chart Col -->
                </div>
            </div>
        </div>

        <!-- EXPENSE SECTION ROW -->
    </div>
    <!-- RIGHT BAR DATA -->
    <div class="col-md-3 b-r">
        <!-- Currency Row -->
        <div class="row">
            <div class="col-md-12 custom-col">
                <form id="db-currency-form" action="<?php echo url('/dashboard'); ?>">
                    <div class="form-group" style="margin-bottom: 0px;">
                        <select class="form-control chosen-select" name="currency" onchange="this.form.submit()">
                            <option disabled="" selected="">-- <?= print_lang($app_lang,'select_currency'); ?> --</option>
                            <?php foreach($currencies as $row){ ?>
                                <option value="<?= $row['uid']; ?>" <?php if($dashboard_currency == $row['uid']){ echo 'selected="selected"'; } ?>><?= $row['name']; ?> (<?= $row['symbol']; ?>)</option>
                            <?php } ?>
                        </select>
                    </div>
                </form>
            </div>
        </div>
        <!-- Currency Row -->
        <!-- BANK DETAILS SECTIOn -->
        <div class="row">
            <div class="col-md-12 custom-col">
                <div class="ibox float-e-margins" style="margin-bottom: 4px;">
                    <div class="ibox-title" style="padding-left: 2px;">
                        <h4>Bank Accounts</h4>
                    </div>
                    <div class="ibox-content" style="padding-top: 3px;">
                        <!-- Bank Activity Row -->
                        <div class="row" style="border-bottom: 1px solid lightgray;">
                            <div class="col-md-8 custom-col">
                                <h5 style="margin-bottom: 3px; font-weight: 700; font-size: 13px;">Afghan Bank Ltd</h5>
                                <p style="font-size: 12px;" class="text-muted">Journal From Acc</p>
                            </div>
                            <div class="col-md-4 custom-col">
                                <p style="margin-bottom: 3px; text-align: right; font-size: 12px; font-weight: 700;">$12345</p>
                                <p style="margin-bottom: 3px; font-size: 10px; text-align: right;" class="text-muted">moments ago</p>
                            </div>
                        </div>
                        <!-- Bank Activity Row -->
                        <!-- Bank Activity Row -->
                        <div class="row" style="border-bottom: 1px solid lightgray;">
                            <div class="col-md-8 custom-col">
                                <h5 style="margin-bottom: 3px; font-weight: 700; font-size: 13px;">MCB Bank Ltd</h5>
                                <p style="font-size: 12px;" class="text-muted">Extra income description</p>
                            </div>
                            <div class="col-md-4 custom-col">
                                <p style="margin-bottom: 3px; text-align: right; font-size: 12px; font-weight: 700;">$9098999</p>
                                <p style="margin-bottom: 3px; font-size: 10px; text-align: right;" class="text-muted">moments ago</p>
                            </div>
                        </div>
                        <!-- Bank Activity Row -->
                        <!-- Bank Activity Row -->
                        <div class="row" style="border-bottom: 1px solid lightgray;">
                            <div class="col-md-8 custom-col">
                                <h5 style="margin-bottom: 3px; font-weight: 700; font-size: 13px;">Meezan Bank Ltd</h5>
                                <p style="font-size: 12px;" class="text-muted">Journal From Acc</p>
                            </div>
                            <div class="col-md-4 custom-col">
                                <p style="margin-bottom: 3px; text-align: right; font-size: 12px; font-weight: 700;">$34434</p>
                                <p style="margin-bottom: 3px; font-size: 10px; text-align: right;" class="text-muted">moments ago</p>
                            </div>
                        </div>
                        <!-- Bank Activity Row -->
                        <!-- Bank Activity Row -->
                        <div class="row" style="border-bottom: 1px solid lightgray;">
                            <div class="col-md-8 custom-col">
                                <h5 style="margin-bottom: 3px; font-weight: 700; font-size: 13px;">UBL Bank Ltd</h5>
                                <p style="font-size: 12px;" class="text-muted">Journal From Acc</p>
                            </div>
                            <div class="col-md-4 custom-col">
                                <p style="margin-bottom: 3px; text-align: right; font-size: 12px; font-weight: 700;">$24324</p>
                                <p style="margin-bottom: 3px; font-size: 10px; text-align: right;" class="text-muted">moments ago</p>
                            </div>
                        </div>
                        <!-- Bank Activity Row -->
                        <!-- Bank Activity Row -->
                        <div class="row" style="border-bottom: 1px solid lightgray;">
                            <div class="col-md-8 custom-col">
                                <h5 style="margin-bottom: 3px; font-weight: 700; font-size: 13px;">Alfalah Bank Ltd</h5>
                                <p style="font-size: 12px;" class="text-muted">Journal From Acc</p>
                            </div>
                            <div class="col-md-4 custom-col">
                                <p style="margin-bottom: 3px; text-align: right; font-size: 12px; font-weight: 700;">$345</p>
                                <p style="margin-bottom: 3px; font-size: 10px; text-align: right;" class="text-muted">moments ago</p>
                            </div>
                        </div>
                        <!-- Bank Activity Row -->
                    </div>
                </div>

            </div>
        </div>
        <!-- BANK DETAILS SECTIOn -->
        <!-- ACTIVITIES DROPDOWN MODULES -->
        <div class="row" style="background: #fff;">
            <div class="col-md-5 custom-col">
                <h3 style="margin-top: 10px;">Activities</h3>
            </div>
            <div class="col-md-7 custom-col">
                <div class="form-group" style="margin-bottom: 0px;">
                    <select class="form-control chosen-select" name="module">
                        <option value="all">All</option>
                        <option value="sales">Sales</option>
                        <option value="purchases">Purchases</option>
                    </select>
                </div>
            </div>
        </div>
        <!-- ACTIVITIES DROPDOWN MODULES -->
        <!-- Activities ROw -->
        <div class="row">
            <div class="col-md-12 custom-col">
                <div class="ibox ">
                    <div class="ibox-content custom-col">
                        <div class="tab-content">
                            <div id="contact-1" class="tab-pane active">
                                <div class="client-detail">
                                <div class="full-height-scroll">
                                    <strong>Need Attention</strong>
                                    <div id="vertical-timeline" class="vertical-container dark-timeline">
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Sales Added: $12300</p>
                                                <span class="vertical-date small text-muted"> 1 sec ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Journal Added: From(Ahamd Ac 11114) - To(Ahamd Ac 11113)
                                                </p>
                                                <span class="vertical-date small text-muted"> 2 mins ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Production Updated: AFN 3,00,000
                                                </p>
                                                <span class="vertical-date small text-muted"> 4 mins ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Sales Added: $12300
                                                </p>
                                                <span class="vertical-date small text-muted"> 10 mins ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Journal Added: From(Ahamd Ac 11114) - To(Ahamd Ac 11113)
                                                </p>
                                                <span class="vertical-date small text-muted"> 2 hr ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Production Updated: AFN 3,00,000
                                                </p>
                                                <span class="vertical-date small text-muted"> 1 day ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Sales Added: $12300
                                                </p>
                                                <span class="vertical-date small text-muted"> 4 days ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Journal Added: From(Ahamd Ac 11114) - To(Ahamd Ac 11113)
                                                </p>
                                                <span class="vertical-date small text-muted"> 5 days ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Production Updated: AFN 3,00,000
                                                </p>
                                                <span class="vertical-date small text-muted"> 10 days ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Sales Added: $12300
                                                </p>
                                                <span class="vertical-date small text-muted"> 10 days ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Journal Added: From(Ahamd Ac 11114) - To(Ahamd Ac 11113)
                                                </p>
                                                <span class="vertical-date small text-muted"> 10 days ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                        <!-- Activity Rows -->
                                        <div class="vertical-timeline-block">
                                            <div class="vertical-timeline-icon red-bg">
                                                <i class="fa fa-exclamation"></i>
                                            </div>
                                            <div class="vertical-timeline-content">
                                                <p>Production Updated: AFN 3,00,000
                                                </p>
                                                <span class="vertical-date small text-muted"> 10 days ago </span>
                                            </div>
                                        </div>
                                        <!-- Activity Rows -->
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Activities ROw -->
    </div>
</div>


<script>
    $(document).ready(function() {
        var doughnutData = {
            labels: ["App","Software","Laptop" ],
            datasets: [{
                data: [70,27,85],
                backgroundColor: ["#a3e1d4","#dedede","#9CC3DA"]
            }]
        } ;


        var doughnutOptions = {
            responsive: false,
            legend: {
                display: false
            }
        };


        var ctx4 = document.getElementById("expense-graph").getContext("2d");
        new Chart(ctx4, {type: 'doughnut', data: doughnutData, options:doughnutOptions});

    });
</script>