@extends('user.layout.main') @section('content') <!-- Main Content --> <div class="main-content"> <section class="section"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="card card-statistic-2"> <div class="card-stats"> <div class="card-stats-title">List Transaction - <div class="dropdown d-inline"> <a class="font-weight-600 dropdown-toggle" data-toggle="dropdown" href="#" id="orders-month">August</a> <ul class="dropdown-menu dropdown-menu-sm"> <li class="dropdown-title">Select Month</li> <li><a href="#" class="dropdown-item">January</a></li> <li><a href="#" class="dropdown-item">February</a></li> <li><a href="#" class="dropdown-item">March</a></li> <li><a href="#" class="dropdown-item">April</a></li> <li><a href="#" class="dropdown-item">May</a></li> <li><a href="#" class="dropdown-item">June</a></li> <li><a href="#" class="dropdown-item">July</a></li> <li><a href="#" class="dropdown-item active">August</a></li> <li><a href="#" class="dropdown-item">September</a></li> <li><a href="#" class="dropdown-item">October</a></li> <li><a href="#" class="dropdown-item">November</a></li> <li><a href="#" class="dropdown-item">December</a></li> </ul> </div> </div> <div class="card-stats-items"> <div class="card-stats-item"> <div class="card-stats-item-count">114</div> <div class="card-stats-item-label">Success</div> </div> <div class="card-stats-item"> <div class="card-stats-item-count">12</div> <div class="card-stats-item-label">Pending</div> </div> <div class="card-stats-item"> <div class="card-stats-item-count">23</div> <div class="card-stats-item-label">Canceled</div> </div> </div> </div> <div class="card-icon shadow-primary bg-primary"> <i class="fas fa-archive"></i> </div> <div class="card-wrap"> <div class="card-header"> <h4>Total Transaction</h4> </div> <div class="card-body"> 159 </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="card card-statistic-2"> <div class="card-chart"> <canvas id="balance-chart" height="80"></canvas> </div> <div class="card-icon shadow-primary bg-primary"> <i class="fas fa-dollar-sign"></i> </div> <div class="card-wrap"> <div class="card-header"> <h4>Total Refund</h4> </div> <div class="card-body"> 190 </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="card card-statistic-2"> <div class="card-chart"> <canvas id="sales-chart" height="80"></canvas> </div> <div class="card-icon shadow-primary bg-primary"> <i class="fas fa-shopping-bag"></i> </div> <div class="card-wrap"> <div class="card-header"> <h4>Total Transaction </h4> </div> <div class="card-body"> 109 </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h4>INCOME</h4> </div> <div class="card-body"> <canvas id="myChart" height="158"></canvas> </div> </div> </div> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h2>Transaction</h2> </div> <div class="card-body p-0"> <div class="table-responsive table-invoice"> <table class="table table-striped"> <tr> <th>Order ID</th> <th>Customer</th> <th>Seller</th> <th>Total</th> <th>Due Date</th> <th>Status</th> <th>Image</th> </tr> @foreach ($refundUserss as $HistoryRefundUser) <tr> <td class="font-weight-600"> {{ $HistoryRefundUser['orderId'] }}</td> <td class="font-weight-600"> {{ $HistoryRefundUser['Customer'] }}</td> <td class="font-weight-600"> {{ $HistoryRefundUser['seller'] }}</td> <td class="font-weight-600"> {{ $HistoryRefundUser['Total'] }}</td> <td>{{ $HistoryRefundUser['dueDate'] }}</td> <td> <div class="badge badge-success" data-status="diterima" onclick="setStatus('diterima')">Diterima</div> </td> <td class="font-weight-600"> {{ $HistoryRefundUser['uploadBukti'] }}</td> <td> </tr> @endforeach </table> </div> </div> </div> </div> </div> </section> </div> <script> // Set new default font family and font color to mimic Bootstrap's default styling Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; Chart.defaults.global.defaultFontColor = '#858796'; var ctx = document.getElementById("myChart1").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Oktober", "November", "December" ], datasets: [{ label: 'Transaction', data: [3200, 18009, 4305, 3022, 6310, 5120, 5880, 6154, 0], borderWidth: 2, backgroundColor: 'rgba(63,82,227,.8)', borderWidth: 0, borderColor: 'transparent', pointBorderWidth: 0, pointRadius: 3.5, pointBackgroundColor: 'transparent', pointHoverBackgroundColor: 'rgba(63,82,227,.8)', }, { label: 'Refund', data: [2207, 3403, 220000, 5025, 2302, 4208, 3880, 4880, 5000], borderWidth: 2, backgroundColor: 'rgba(254,86,83,.7)', borderWidth: 0, borderColor: 'transparent', pointBorderWidth: 0, pointRadius: 3.5, pointBackgroundColor: 'transparent', pointHoverBackgroundColor: 'rgba(254,86,83,.8)', } ] }, options: { layout: { padding: 20, }, legend: { display: true, labels: { padding: 20, } }, scales: { yAxes: [{ gridLines: { // display: false, drawBorder: false, color: '#f2f2f2', }, ticks: { beginAtZero: true, stepSize: 15000, callback: function(value, index, values) { // return 'Rp.' + value; return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', }).format(value); } } }], xAxes: [{ gridLines: { display: true, tickMarkLength: 15, } }] }, } }); var balance_chart = document.getElementById("balance-chart").getContext('2d'); var balance_chart_bg_color = balance_chart.createLinearGradient(0, 0, 0, 70); balance_chart_bg_color.addColorStop(0, 'rgba(63,82,227,.2)'); balance_chart_bg_color.addColorStop(1, 'rgba(63,82,227,0)'); var myChart = new Chart(balance_chart, { type: 'line', data: { labels: ['16-07-2018', '17-07-2018', '18-07-2018', '19-07-2018', '20-07-2018', '21-07-2018', '22-07-2018', '23-07-2018', '24-07-2018', '25-07-2018', '26-07-2018', '27-07-2018', '28-07-2018', '29-07-2018', '30-07-2018', '31-07-2018' ], datasets: [{ label: 'Balance', data: [50, 61, 80, 50, 72, 52, 60, 41, 30, 45, 70, 40, 93, 63, 50, 62], backgroundColor: balance_chart_bg_color, borderWidth: 3, borderColor: 'rgba(63,82,227,1)', pointBorderWidth: 0, pointBorderColor: 'transparent', pointRadius: 3, pointBackgroundColor: 'transparent', pointHoverBackgroundColor: 'rgba(63,82,227,1)', }] }, options: { layout: { padding: { bottom: -1, left: -1 } }, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false, drawBorder: false, }, ticks: { beginAtZero: true, display: false } }], xAxes: [{ gridLines: { drawBorder: false, display: false, }, ticks: { display: false } }] }, } }); var sales_chart = document.getElementById("sales-chart").getContext('2d'); var sales_chart_bg_color = sales_chart.createLinearGradient(0, 0, 0, 80); balance_chart_bg_color.addColorStop(0, 'rgba(63,82,227,.2)'); balance_chart_bg_color.addColorStop(1, 'rgba(63,82,227,0)'); var myChart = new Chart(sales_chart, { type: 'line', data: { labels: ['16-07-2018', '17-07-2018', '18-07-2018', '19-07-2018', '20-07-2018', '21-07-2018', '22-07-2018', '23-07-2018', '24-07-2018', '25-07-2018', '26-07-2018', '27-07-2018', '28-07-2018', '29-07-2018', '30-07-2018', '31-07-2018' ], datasets: [{ label: 'Sales', data: [70, 62, 44, 40, 21, 63, 82, 52, 50, 31, 70, 50, 91, 63, 51, 60], borderWidth: 2, backgroundColor: balance_chart_bg_color, borderWidth: 3, borderColor: 'rgba(63,82,227,1)', pointBorderWidth: 0, pointBorderColor: 'transparent', pointRadius: 3, pointBackgroundColor: 'transparent', pointHoverBackgroundColor: 'rgba(63,82,227,1)', }] }, options: { layout: { padding: { bottom: -1, left: -1 } }, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false, drawBorder: false, }, ticks: { beginAtZero: true, display: false } }], xAxes: [{ gridLines: { drawBorder: false, display: false, }, ticks: { display: false } }] }, } }); </script> @endsection