Merge pull request #23 from arieeefajar/feat/dashboard
feat(dashboard): create dashboard admin and officer page
This commit is contained in:
commit
cc29b2b259
|
@ -2,13 +2,23 @@
|
||||||
|
|
||||||
namespace App\Http\Controllers;
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use App\Models\Indicator;
|
||||||
|
use App\Models\Land;
|
||||||
|
use App\Models\Rule;
|
||||||
|
use App\Models\User;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
|
|
||||||
class DashboardController extends Controller
|
class DashboardController extends Controller
|
||||||
{
|
{
|
||||||
public function admin()
|
public function admin()
|
||||||
{
|
{
|
||||||
return view('dashboard.admin');
|
$userCount = User::count();
|
||||||
|
$landCount = Land::count();
|
||||||
|
$indicatorCount = Indicator::whereIn('id', function ($query) {
|
||||||
|
$query->select('indicator_id')->from('rule');
|
||||||
|
})->count();
|
||||||
|
$rulesCount = Rule::count();
|
||||||
|
return view('dashboard.admin', compact('userCount', 'landCount', 'indicatorCount', 'rulesCount'));
|
||||||
}
|
}
|
||||||
|
|
||||||
public function petugas()
|
public function petugas()
|
||||||
|
|
|
@ -1,6 +1,13 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
@push('title', 'Dashboard Admin')
|
@push('title', 'Dashboard Admin')
|
||||||
@section('content')
|
@section('content')
|
||||||
|
@push('other-css')
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||||
|
@endpush
|
||||||
|
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
@ -22,8 +29,121 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- end page title -->
|
<!-- end page title -->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card card-animate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="fw-medium text-muted mb-0">Jumlah Pengguna</p>
|
||||||
|
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
|
||||||
|
data-target="{{ $userCount }}">0</span></h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="avatar-sm flex-shrink-0">
|
||||||
|
<span class="avatar-title bg-soft-primary rounded-circle fs-2">
|
||||||
|
<i data-feather="users" class="text-primary"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- end card body -->
|
||||||
|
</div> <!-- end card-->
|
||||||
|
</div> <!-- end col-->
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card card-animate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="fw-medium text-muted mb-0">Jumlah Lahan</p>
|
||||||
|
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
|
||||||
|
data-target="{{ $landCount }}">0</span></h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="avatar-sm flex-shrink-0">
|
||||||
|
<span class="avatar-title bg-soft-primary rounded-circle fs-2">
|
||||||
|
<i data-feather="activity" class="text-primary"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- end card body -->
|
||||||
|
</div> <!-- end card-->
|
||||||
|
</div> <!-- end col-->
|
||||||
|
</div> <!-- end row-->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card card-animate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="fw-medium text-muted mb-0">Jumlah indikator yang digunakan saat ini</p>
|
||||||
|
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
|
||||||
|
data-target="{{ $indicatorCount }}">0</span></h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="avatar-sm flex-shrink-0">
|
||||||
|
<span class="avatar-title bg-soft-primary rounded-circle fs-2">
|
||||||
|
<i data-feather="key" class="text-primary"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card card-animate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="fw-medium text-muted mb-0">Jumlah aturan yang telah ditetapkan</p>
|
||||||
|
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
|
||||||
|
data-target="{{ $rulesCount }}">0</span></h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="avatar-sm flex-shrink-0">
|
||||||
|
<span class="avatar-title bg-soft-primary rounded-circle fs-2">
|
||||||
|
<i data-feather="check-circle" class="text-primary"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h4 class="card-title mb-0">Peta Lahan</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="map" style="height: 400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- container-fluid -->
|
<!-- container-fluid -->
|
||||||
</div>
|
</div>
|
||||||
<!-- End Page-content -->
|
<!-- End Page-content -->
|
||||||
|
|
||||||
|
@push('other-js')
|
||||||
|
<script>
|
||||||
|
const map = L.map('map', {
|
||||||
|
attributionControl: false,
|
||||||
|
}).setView([-8.172495095862395, 113.69876818661332], 10);
|
||||||
|
|
||||||
|
const googleSat = L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}', {
|
||||||
|
maxZoom: 20,
|
||||||
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
||||||
|
}).addTo(map);
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
@endsection
|
@endsection
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
@push('title', 'Dashboard Petugas')
|
@push('title', 'Dashboard Petugas')
|
||||||
@section('content')
|
@section('content')
|
||||||
|
@push('other-css')
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||||
|
@endpush
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- start page title -->
|
<!-- start page title -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
@ -22,8 +27,76 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- end page title -->
|
<!-- end page title -->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card card-animate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="fw-medium text-muted mb-0">Jumlah Lahan</p>
|
||||||
|
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
|
||||||
|
data-target="">0</span></h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="avatar-sm flex-shrink-0">
|
||||||
|
<span class="avatar-title bg-soft-primary rounded-circle fs-2">
|
||||||
|
<i data-feather="activity" class="text-primary"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- end card body -->
|
||||||
|
</div> <!-- end card-->
|
||||||
|
</div> <!-- end col-->
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card card-animate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="fw-medium text-muted mb-0">Jumlah indikator yang digunakan saat ini</p>
|
||||||
|
<h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
|
||||||
|
data-target="">0</span></h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="avatar-sm flex-shrink-0">
|
||||||
|
<span class="avatar-title bg-soft-primary rounded-circle fs-2">
|
||||||
|
<i data-feather="key" class="text-primary"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- end row-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h4 class="card-title mb-0">Peta Lahan</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="map" style="height: 400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- container-fluid -->
|
<!-- container-fluid -->
|
||||||
</div>
|
</div>
|
||||||
<!-- End Page-content -->
|
<!-- End Page-content -->
|
||||||
|
@push('other-js')
|
||||||
|
<script>
|
||||||
|
const map = L.map('map', {
|
||||||
|
attributionControl: false,
|
||||||
|
}).setView([-8.172495095862395, 113.69876818661332], 10);
|
||||||
|
|
||||||
|
const googleSat = L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}', {
|
||||||
|
maxZoom: 20,
|
||||||
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
||||||
|
}).addTo(map);
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
@endsection
|
@endsection
|
||||||
|
|
Loading…
Reference in New Issue