on progress dashboard

This commit is contained in:
JokoPrasetio 2025-07-29 22:41:17 +07:00
parent 7306d80565
commit 57bf235cca
4 changed files with 234 additions and 243 deletions

View File

@ -3,6 +3,7 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class DashboardController extends Controller class DashboardController extends Controller
{ {
@ -12,4 +13,8 @@ class DashboardController extends Controller
]; ];
return view('dashboard.index', $data); return view('dashboard.index', $data);
} }
public function dataDashboard(){
$data = DB::connection('dbOrderGizi')->table('public.order');
}
} }

View 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')
}
}
],
});

View File

@ -1,254 +1,104 @@
@extends('dashboard.layouts.main') @extends('dashboard.layouts.main')
@section('body_main') @section('body_main')
<div class="container-xxl flex-grow-1 container-p-y"> <div class="container-xxl flex-grow-1 container-p-y">
<div class="row"> <div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="col-lg-8 mb-4 order-0"> <h4 class="fw-bold mb-0">Dashboard Pesanan</h4>
<div class="card"> </div>
<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>
<a href="javascript:;" class="btn btn-sm btn-outline-primary">View Badges</a> {{-- Filter Tanggal --}}
</div> <div class="row justify-content-end mb-4">
</div> <div class="col-auto">
<div class="col-sm-5 text-center text-sm-left"> <form method="GET" action="" class="d-flex flex-wrap justify-content-end align-items-end">
<div class="card-body pb-0 px-0 px-md-4"> <div class="me-2">
<img <label class="form-label mb-1">Dari Tanggal</label>
src="/assets/img/illustrations/man-with-laptop-light.png" <input type="date" name="start_date" class="form-control" value="">
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>
</div> </div>
<div class="col-lg-4 col-md-4 order-1"> <div class="me-2">
<div class="row"> <label class="form-label mb-1">Sampai Tanggal</label>
<div class="col-lg-6 col-md-12 col-6 mb-4"> <input type="date" name="end_date" class="form-control" value="">
<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> </div>
<!-- Total Revenue --> <div class="mt-3 mt-md-0">
<div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4"> <button type="submit" class="btn btn-primary">Tampilkan</button>
<div class="card"> </div>
<div class="row row-bordered g-0"> </form>
<div class="col-md-8"> </div>
<h5 class="card-header m-0 me-2 pb-3">Total Revenue</h5> </div>
<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="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between"> {{-- Row 1: Ringkasan Umum --}}
<div class="d-flex"> <div class="row g-4">
<div class="me-2"> <div class="col-md-4">
<span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span> <div class="card border-0 shadow-sm bg-light-primary text-primary">
</div> <div class="card-body">
<div class="d-flex flex-column"> <h5 class="card-title mb-1"><i class="bx bx-calendar me-1"></i> Pesanan Hari Ini</h5>
<small>2022</small> <h2 class="fw-bold mb-1">23</h2>
<h6 class="mb-0">$32.5k</h6> <small>Data tanggal {{ \Carbon\Carbon::now()->format('d M Y') }}</small>
</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>
</div> </div>
</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 @endsection

View File

@ -22,6 +22,7 @@ Route::group(['middleware' => ['auth']], function(){
Route::group(['prefix' => 'dashboard'], function(){ Route::group(['prefix' => 'dashboard'], function(){
Route::get('/', [DashboardController::class, 'index']); Route::get('/', [DashboardController::class, 'index']);
Route::get('/data', [DashboardController::class, 'dataDashboard']);
Route::resource('/klasifikasi-menu', KlasifikasiMenuController::class); Route::resource('/klasifikasi-menu', KlasifikasiMenuController::class);
Route::get('/datatable/klasifikasi-menu', [KlasifikasiMenuController::class, 'datatable']); Route::get('/datatable/klasifikasi-menu', [KlasifikasiMenuController::class, 'datatable']);