dashboard produksi
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
@extends('layout.main')
|
||||
|
||||
@push('style')
|
||||
<style>
|
||||
.pasar-filter-card .filter-item {
|
||||
min-width: 210px;
|
||||
}
|
||||
|
||||
.pasar-kpi-value {
|
||||
color: var(--bs-heading-color);
|
||||
font-size: 1.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.pasar-kpi-label {
|
||||
color: var(--bs-heading-color);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.pasar-kpi-desc {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.pasar-empty-state {
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.pasar-filter-card .filter-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="row g-4 mb-4">
|
||||
<form id="form-filter" class="col-12" method="GET" action="{{ route('dashboard.pasar') }}">
|
||||
<div class="card card-border-shadow-primary pasar-filter-card">
|
||||
<div class="card-body py-3">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<div class="d-flex align-items-center me-2">
|
||||
<i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
|
||||
<span class="fw-medium">Komoditas <span class="text-danger">*</span></span>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select id="filter-komoditas" class="form-select form-select-sm" name="komoditas_id">
|
||||
<option value="">Pilih Komoditas</option>
|
||||
@foreach ($komoditas as $item)
|
||||
<option value="{{ $item->id }}" {{ old('komoditas_id', $komoditas_id) == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="icon-base ti tabler-filter me-1"></i>
|
||||
Filter
|
||||
</button>
|
||||
<button type="button" id="btn-reset-dashboard-filter" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="icon-base ti tabler-refresh me-1"></i>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-3">
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<div class="d-flex align-items-center me-2">
|
||||
<i class="icon-base ti tabler-map-2 me-2"></i>
|
||||
<span class="fw-medium">Wilayah</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select id="filter-provinsi" class="form-select form-select-sm" name="provinsi_id" data-default="{{ $provinsi_id }}">
|
||||
<option value="">Semua Provinsi</option>
|
||||
@foreach($provinsi as $p)
|
||||
<option value="{{ $p->provinsi_id }}" {{ old('provinsi_id', $provinsi_id) == $p->provinsi_id ? 'selected' : '' }}>
|
||||
{{ $p->provinsi }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select id="filter-kabkota" class="form-select form-select-sm" name="kabupatenKota_id" data-default="{{ $kabupatenKota_id }}" disabled>
|
||||
<option value="">Semua Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select id="filter-kecamatan" class="form-select form-select-sm" name="kecamatan_id" data-default="{{ $kecamatan_id }}" disabled>
|
||||
<option value="">Semua Kecamatan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select id="filter-desa" class="form-select form-select-sm" name="desaKelurahan_id" data-default="{{ $desaKelurahan_id }}" disabled>
|
||||
<option value="">Semua Desa/Kelurahan</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@if (! $selectedKomoditas)
|
||||
<div class="alert alert-primary d-flex align-items-start gap-3" role="alert">
|
||||
<i class="icon-base ti tabler-info-circle mt-1"></i>
|
||||
<div>
|
||||
<h6 class="alert-heading mb-1">Pilih komoditas terlebih dahulu</h6>
|
||||
<div>Data dashboard pasar baru akan ditampilkan setelah filter komoditas wajib diisi.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body pasar-empty-state">
|
||||
<div>
|
||||
<div class="avatar avatar-lg mx-auto mb-3">
|
||||
<span class="avatar-initial rounded bg-label-primary">
|
||||
<i class="icon-base ti tabler-building-store icon-28px"></i>
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="mb-1">Belum ada data pasar yang ditampilkan</h5>
|
||||
<p class="text-body-secondary mb-0">Gunakan filter komoditas untuk melihat harga jual rata-rata.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card card-border-shadow-{{ $priceCard['variant'] }} h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<div class="avatar avatar-lg">
|
||||
<span class="avatar-initial rounded bg-label-{{ $priceCard['variant'] }}">
|
||||
<i class="icon-base ti {{ $priceCard['icon'] }} icon-28px"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex align-items-baseline gap-2 flex-wrap">
|
||||
<h4 class="mb-0 pasar-kpi-value">{{ $priceCard['value'] }}</h4>
|
||||
<small class="text-body-secondary">{{ $priceCard['unit'] }}</small>
|
||||
</div>
|
||||
|
||||
<p class="mb-0 mt-1 pasar-kpi-label">{{ $priceCard['label'] }}</p>
|
||||
<small class="text-body-secondary pasar-kpi-desc">{{ $priceCard['description'] }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-3 border-top d-flex align-items-center justify-content-between gap-3">
|
||||
<span class="badge bg-label-success">{{ $priceCard['caption'] }}</span>
|
||||
<small class="text-body-secondary">{{ number_format($priceCard['records'], 0, ',', '.') }} data harga</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const wilayah = @json($wilayah);
|
||||
|
||||
function fillSelect($select, items, placeholder) {
|
||||
$select.empty().append(new Option(placeholder, ''));
|
||||
items.forEach(function (item) {
|
||||
$select.append(new Option(item.nama, item.id));
|
||||
});
|
||||
}
|
||||
|
||||
function selectedProvinsi() {
|
||||
const id = $('#filter-provinsi').val();
|
||||
return wilayah.find(function (item) {
|
||||
return String(item.id) === String(id);
|
||||
});
|
||||
}
|
||||
|
||||
function selectedKabupaten() {
|
||||
const provinsi = selectedProvinsi();
|
||||
const id = $('#filter-kabkota').val();
|
||||
return (provinsi?.kabupaten || []).find(function (item) {
|
||||
return String(item.id) === String(id);
|
||||
});
|
||||
}
|
||||
|
||||
function selectedKecamatan() {
|
||||
const kabupaten = selectedKabupaten();
|
||||
const id = $('#filter-kecamatan').val();
|
||||
return (kabupaten?.kecamatan || []).find(function (item) {
|
||||
return String(item.id) === String(id);
|
||||
});
|
||||
}
|
||||
|
||||
$('#filter-provinsi, #filter-kabkota, #filter-kecamatan, #filter-desa, #filter-komoditas').select2({ width: '100%' });
|
||||
|
||||
$('#filter-provinsi').on('change', function () {
|
||||
const provinsi = selectedProvinsi();
|
||||
fillSelect($('#filter-kabkota'), provinsi?.kabupaten || [], 'Semua Kabupaten/Kota');
|
||||
fillSelect($('#filter-kecamatan'), [], 'Semua Kecamatan');
|
||||
fillSelect($('#filter-desa'), [], 'Semua Desa/Kelurahan');
|
||||
$('#filter-kabkota').prop('disabled', !provinsi).trigger('change.select2');
|
||||
$('#filter-kecamatan, #filter-desa').prop('disabled', true).trigger('change.select2');
|
||||
});
|
||||
|
||||
$('#filter-kabkota').on('change', function () {
|
||||
const kabupaten = selectedKabupaten();
|
||||
fillSelect($('#filter-kecamatan'), kabupaten?.kecamatan || [], 'Semua Kecamatan');
|
||||
fillSelect($('#filter-desa'), [], 'Semua Desa/Kelurahan');
|
||||
$('#filter-kecamatan').prop('disabled', !kabupaten).trigger('change.select2');
|
||||
$('#filter-desa').prop('disabled', true).trigger('change.select2');
|
||||
});
|
||||
|
||||
$('#filter-kecamatan').on('change', function () {
|
||||
const kecamatan = selectedKecamatan();
|
||||
fillSelect($('#filter-desa'), kecamatan?.desa || [], 'Semua Desa/Kelurahan');
|
||||
$('#filter-desa').prop('disabled', !kecamatan).trigger('change.select2');
|
||||
});
|
||||
|
||||
const defaultProvinsi = String($('#filter-provinsi').data('default') || '');
|
||||
const defaultKabupaten = String($('#filter-kabkota').data('default') || '');
|
||||
const defaultKecamatan = String($('#filter-kecamatan').data('default') || '');
|
||||
const defaultDesa = String($('#filter-desa').data('default') || '');
|
||||
|
||||
if (defaultProvinsi) {
|
||||
$('#filter-provinsi').val(defaultProvinsi).trigger('change');
|
||||
if (defaultKabupaten) {
|
||||
$('#filter-kabkota').val(defaultKabupaten).trigger('change');
|
||||
if (defaultKecamatan) {
|
||||
$('#filter-kecamatan').val(defaultKecamatan).trigger('change');
|
||||
if (defaultDesa) {
|
||||
$('#filter-desa').val(defaultDesa).trigger('change.select2');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('#btn-reset-dashboard-filter').on('click', function () {
|
||||
window.location.href = @json(route('dashboard.pasar'));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
File diff suppressed because it is too large
Load Diff
@@ -51,6 +51,13 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item {{ request()->routeIs('dashboard.pasar') ? 'active' : '' }}">
|
||||
<a href="{{ route('dashboard.pasar') }}" class="menu-link">
|
||||
<span class="menu-icon sidebar-icon" aria-hidden="true"><i class="icon-base ti tabler-building-store"></i></span><div data-i18n="Pasar">Pasar</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item {{ request()->routeIs('dashboard.indikator-pertanian') ? 'active' : '' }}">
|
||||
<a href="{{ route('dashboard.indikator-pertanian') }}" class="menu-link">
|
||||
|
||||
Reference in New Issue
Block a user