on progress dashboard
This commit is contained in:
parent
7306d80565
commit
57bf235cca
@ -3,6 +3,7 @@
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
class DashboardController extends Controller
|
||||
{
|
||||
@ -12,4 +13,8 @@ class DashboardController extends Controller
|
||||
];
|
||||
return view('dashboard.index', $data);
|
||||
}
|
||||
|
||||
public function dataDashboard(){
|
||||
$data = DB::connection('dbOrderGizi')->table('public.order');
|
||||
}
|
||||
}
|
||||
|
||||
135
public/js/dashboard/index.js
Normal file
135
public/js/dashboard/index.js
Normal file
@ -0,0 +1,135 @@
|
||||
const datatable = $("#datatableRekapDashboard")
|
||||
|
||||
datatable.bootstrapTable({
|
||||
url: "/dashboard/datatable/selesai",
|
||||
showColumns: true,
|
||||
showColumnsToggleAll: true,
|
||||
showRefresh: true,
|
||||
sortable: true,
|
||||
search: true,
|
||||
searchOnEnterKey: false,
|
||||
searchHighlight: true,
|
||||
pagination: true,
|
||||
serverSide:true,
|
||||
pageSize: 10,
|
||||
pageList: [10, 20, 30, 40, 50, 100, 200],
|
||||
cookie: true,
|
||||
cookieIdTable: "table_rma_ssc_id",
|
||||
icons: {
|
||||
refresh: "fas fa-sync-alt", // atau ganti ke icon lain
|
||||
columns: "fas fa-th-large"
|
||||
},
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: "Action",
|
||||
field:'order_id',
|
||||
formatter: function(value, row) {
|
||||
let buttons = ''
|
||||
if(row?.status_order === "Lunas"){
|
||||
buttons += `
|
||||
<button class="btn btn-sm btn-warning text-dark" onclick="orderSelesai('${row.order_id}')">
|
||||
<i class="fa fa-utensils me-1"></i>
|
||||
</button>
|
||||
`
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="d-flex space-x">
|
||||
${buttons}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: "No.Order",
|
||||
field: 'no_order',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "Status Pembayaran",
|
||||
field: 'status_order',
|
||||
sortable: true,
|
||||
formatter: function(value, row) {
|
||||
const status = value;
|
||||
let badgeClass = 'bg-secondary';
|
||||
if (status === "Belum Bayar") {
|
||||
badgeClass = 'bg-warning text-dark';
|
||||
} else if (status === "Menunggu Konfirmasi Pembayaran") {
|
||||
badgeClass = 'bg-primary';
|
||||
} else if (status === "Lunas" || status === "Sudah Bayar") {
|
||||
badgeClass = 'bg-success text-dark';
|
||||
} else if(status === "Dibatalkan"){
|
||||
badgeClass = 'bg-danger';
|
||||
}
|
||||
return `
|
||||
<span class="badge ${badgeClass} px-3 py-1">${status}</span>
|
||||
${status === 'Dibatalkan' && row.note_dibatalkan ? `
|
||||
<div class="text-danger small mt-1">
|
||||
<i class="fa fa-info-circle"></i> ${row.note_dibatalkan}
|
||||
</div>
|
||||
` : ''}
|
||||
`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Status Pesanan",
|
||||
formatter: function(value, row) {
|
||||
const progress = parseInt(row.progress) || 0;
|
||||
const total = row.total_detail || 0;
|
||||
const selesai = row.selesai_detail || 0;
|
||||
|
||||
return `
|
||||
<div class="text-center">
|
||||
<div class="progress" style="height: 18px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
style="width: ${progress}%;"
|
||||
aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">
|
||||
${progress}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">${selesai} / ${total} selesai</small>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "Pemesan",
|
||||
field:'nama_pemesan',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "Tgl Pemesanan",
|
||||
field: 'entry_at',
|
||||
formatter: function(value, row) {
|
||||
if (!row?.entry_at) return '-';
|
||||
|
||||
const date = new Date(row.entry_at);
|
||||
return date.toLocaleString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'short', // Bisa diganti 'long' kalau mau 'Juli' bukan 'Jul'
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false // pakai format 24 jam
|
||||
});
|
||||
},
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "Kategori Customer",
|
||||
field: 'jenis_customer',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "Total Harga Pesanan",
|
||||
field:'total_harga',
|
||||
formatter: function(value, row){
|
||||
return 'Rp ' + parseInt(row.total_harga).toLocaleString('id-ID')
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
});
|
||||
@ -1,254 +1,104 @@
|
||||
@extends('dashboard.layouts.main')
|
||||
@section('body_main')
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 order-0">
|
||||
<div class="card">
|
||||
<div class="d-flex align-items-end row">
|
||||
<div class="col-sm-7">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-primary">Congratulations John! 🎉</h5>
|
||||
<p class="mb-4">
|
||||
You have done <span class="fw-bold">72%</span> more sales today. Check your new badge in
|
||||
your profile.
|
||||
</p>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<h4 class="fw-bold mb-0">Dashboard Pesanan</h4>
|
||||
</div>
|
||||
|
||||
<a href="javascript:;" class="btn btn-sm btn-outline-primary">View Badges</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 text-center text-sm-left">
|
||||
<div class="card-body pb-0 px-0 px-md-4">
|
||||
<img
|
||||
src="/assets/img/illustrations/man-with-laptop-light.png"
|
||||
height="140"
|
||||
alt="View Badge User"
|
||||
data-app-dark-img="illustrations/man-with-laptop-dark.png"
|
||||
data-app-light-img="illustrations/man-with-laptop-light.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Filter Tanggal --}}
|
||||
<div class="row justify-content-end mb-4">
|
||||
<div class="col-auto">
|
||||
<form method="GET" action="" class="d-flex flex-wrap justify-content-end align-items-end">
|
||||
<div class="me-2">
|
||||
<label class="form-label mb-1">Dari Tanggal</label>
|
||||
<input type="date" name="start_date" class="form-control" value="">
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 order-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12 col-6 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-title d-flex align-items-start justify-content-between">
|
||||
<div class="avatar flex-shrink-0">
|
||||
<img
|
||||
src="/assets/img/icons/unicons/chart-success.png"
|
||||
alt="chart success"
|
||||
class="rounded"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt3"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
|
||||
<a class="dropdown-item" href="javascript:void(0);">View More</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fw-semibold d-block mb-1">Profit</span>
|
||||
<h3 class="card-title mb-2">$12,628</h3>
|
||||
<small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +72.80%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12 col-6 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-title d-flex align-items-start justify-content-between">
|
||||
<div class="avatar flex-shrink-0">
|
||||
<img
|
||||
src="/assets/img/icons/unicons/wallet-info.png"
|
||||
alt="Credit Card"
|
||||
class="rounded"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt6"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
|
||||
<a class="dropdown-item" href="javascript:void(0);">View More</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Sales</span>
|
||||
<h3 class="card-title text-nowrap mb-1">$4,679</h3>
|
||||
<small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +28.42%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="me-2">
|
||||
<label class="form-label mb-1">Sampai Tanggal</label>
|
||||
<input type="date" name="end_date" class="form-control" value="">
|
||||
</div>
|
||||
<!-- Total Revenue -->
|
||||
<div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4">
|
||||
<div class="card">
|
||||
<div class="row row-bordered g-0">
|
||||
<div class="col-md-8">
|
||||
<h5 class="card-header m-0 me-2 pb-3">Total Revenue</h5>
|
||||
<div id="totalRevenueChart" class="px-2"></div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card-body">
|
||||
<div class="text-center">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn btn-sm btn-outline-primary dropdown-toggle"
|
||||
type="button"
|
||||
id="growthReportId"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
2022
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="growthReportId">
|
||||
<a class="dropdown-item" href="javascript:void(0);">2021</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">2020</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">2019</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="growthChart"></div>
|
||||
<div class="text-center fw-semibold pt-3 mb-2">62% Company Growth</div>
|
||||
<div class="mt-3 mt-md-0">
|
||||
<button type="submit" class="btn btn-primary">Tampilkan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between">
|
||||
<div class="d-flex">
|
||||
<div class="me-2">
|
||||
<span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<small>2022</small>
|
||||
<h6 class="mb-0">$32.5k</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-2">
|
||||
<span class="badge bg-label-info p-2"><i class="bx bx-wallet text-info"></i></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<small>2021</small>
|
||||
<h6 class="mb-0">$41.2k</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Total Revenue -->
|
||||
<div class="col-12 col-md-8 col-lg-4 order-3 order-md-2">
|
||||
<div class="row">
|
||||
<div class="col-6 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-title d-flex align-items-start justify-content-between">
|
||||
<div class="avatar flex-shrink-0">
|
||||
<img src="/assets/img/icons/unicons/paypal.png" alt="Credit Card" class="rounded" />
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt4"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
|
||||
<a class="dropdown-item" href="javascript:void(0);">View More</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="d-block mb-1">Payments</span>
|
||||
<h3 class="card-title text-nowrap mb-2">$2,456</h3>
|
||||
<small class="text-danger fw-semibold"><i class="bx bx-down-arrow-alt"></i> -14.82%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-title d-flex align-items-start justify-content-between">
|
||||
<div class="avatar flex-shrink-0">
|
||||
<img src="/assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt1"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="cardOpt1">
|
||||
<a class="dropdown-item" href="javascript:void(0);">View More</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fw-semibold d-block mb-1">Transactions</span>
|
||||
<h3 class="card-title mb-2">$14,857</h3>
|
||||
<small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +28.14%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between flex-sm-row flex-column gap-3">
|
||||
<div class="d-flex flex-sm-column flex-row align-items-start justify-content-between">
|
||||
<div class="card-title">
|
||||
<h5 class="text-nowrap mb-2">Profile Report</h5>
|
||||
<span class="badge bg-label-warning rounded-pill">Year 2021</span>
|
||||
</div>
|
||||
<div class="mt-sm-auto">
|
||||
<small class="text-success text-nowrap fw-semibold"
|
||||
><i class="bx bx-chevron-up"></i> 68.2%</small
|
||||
>
|
||||
<h3 class="mb-0">$84,686k</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profileReportChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Row 1: Ringkasan Umum --}}
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm bg-light-primary text-primary">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><i class="bx bx-calendar me-1"></i> Pesanan Hari Ini</h5>
|
||||
<h2 class="fw-bold mb-1">23</h2>
|
||||
<small>Data tanggal {{ \Carbon\Carbon::now()->format('d M Y') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm bg-light-success text-success">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><i class="bx bx-check-circle me-1"></i> Pesanan Lunas</h5>
|
||||
<h2 class="fw-bold mb-1">15</h2>
|
||||
<small>Status: Lunas</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm bg-light-warning text-warning">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><i class="bx bx-time-five me-1"></i> Belum Selesai</h5>
|
||||
<h2 class="fw-bold mb-1">8</h2>
|
||||
<small>Menunggu Konfirmasi / Pembayaran</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Row 2: Transaksi & Status Pengambilan --}}
|
||||
<div class="row g-4 mt-2">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm bg-light-info text-info">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><i class="bx bx-money me-1"></i> Total Nilai Transaksi</h5>
|
||||
<h2 class="fw-bold mb-1">Rp 1.240.000</h2>
|
||||
<small>Akumulasi dari pesanan Lunas</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm bg-light-secondary text-secondary">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><i class="bx bx-box me-1"></i> Pesanan Pending</h5>
|
||||
<h2 class="fw-bold mb-1">5</h2>
|
||||
<small>Lunas tapi belum diambil</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm bg-light-success text-success">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-1"><i class="bx bx-check-square me-1"></i> Pesanan Diambil</h5>
|
||||
<h2 class="fw-bold mb-1">10</h2>
|
||||
<small>Pemesan sudah ambil makanannya</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Data Pesanan </h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table" id="datatableRekapDashboard"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
|
||||
@endsection
|
||||
|
||||
@ -22,6 +22,7 @@ Route::group(['middleware' => ['auth']], function(){
|
||||
Route::group(['prefix' => 'dashboard'], function(){
|
||||
|
||||
Route::get('/', [DashboardController::class, 'index']);
|
||||
Route::get('/data', [DashboardController::class, 'dataDashboard']);
|
||||
|
||||
Route::resource('/klasifikasi-menu', KlasifikasiMenuController::class);
|
||||
Route::get('/datatable/klasifikasi-menu', [KlasifikasiMenuController::class, 'datatable']);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user