376 lines
20 KiB
PHP
376 lines
20 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>Dashboard - Alumni System</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
|
|
<link href="{{ asset('assets/img/apple-touch-icon.png') }} " rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
|
|
rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }} " rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
@include('sidebar')
|
|
@include('header')
|
|
|
|
|
|
<main id="main" class="main">
|
|
<div class="pagetitle">
|
|
<h1>Dashboard</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section dashboard">
|
|
<div class="row">
|
|
|
|
<!-- Left side columns -->
|
|
<div class="col-lg-12">
|
|
<div class="row">
|
|
|
|
<!-- Info Cards -->
|
|
<div class="col-xxl-4 col-md-6">
|
|
<div class="card info-card sales-card">
|
|
<div class="filter">
|
|
<a class="icon" href="#" data-bs-toggle="dropdown"><i
|
|
class="bi bi-three-dots"></i></a>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Alumni
|
|
@if (request('angkatan'))
|
|
<span>| Angkatan {{ $angkatanList[request('angkatan')] ?? '' }}</span>
|
|
@else
|
|
<span>| Semua Angkatan</span>
|
|
@endif
|
|
</h5>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-people"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>{{ $totalAlumniCount }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Sales Card -->
|
|
|
|
<div class="col-xxl-4 col-md-6">
|
|
<div class="card info-card revenue-card">
|
|
<!-- Filter Dropdown -->
|
|
<div class="filter">
|
|
<a class="icon" href="#" data-bs-toggle="dropdown"><i
|
|
class="bi bi-three-dots"></i></a>
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
|
<li class="dropdown-header text-start">
|
|
<h6>Pilih Angkatan</h6>
|
|
</li>
|
|
@foreach ($angkatanList as $id => $tahun)
|
|
<li>
|
|
<a class="dropdown-item"
|
|
href="{{ route('dashboard', ['angkatan' => $id]) }}"
|
|
{{ request('angkatan') == $id ? 'active' : '' }}>
|
|
{{ $tahun }}
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Card Content -->
|
|
<div class="card-body">
|
|
<h4 class="card-title">Pekerjaan <br> Paling Banyak Ditekuni
|
|
@if (request('angkatan'))
|
|
<br
|
|
<span>| Angkatan {{ $angkatanList[request('angkatan')] ?? '' }}</span>
|
|
@else
|
|
<span>| Semua Angkatan</span>
|
|
@endif
|
|
</h4>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-briefcase-fill"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h5>{{ $topJobName ?? 'Belum Ada Data' }}</h5>
|
|
<span class="text-primary small pt-1 fw-bold">{{ $topJobCount ?? 0 }}
|
|
alumni</span>
|
|
<span class="text-muted small pt-2 ps-1">menekuni profesi ini</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Revenue Card -->
|
|
|
|
<div class="col-xxl-4 col-xl-12">
|
|
<div class="card info-card customers-card">
|
|
<div class="filter">
|
|
<a class="icon" href="#" data-bs-toggle="dropdown"><i
|
|
class="bi bi-three-dots"></i></a>
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
|
<li class="dropdown-header text-start">
|
|
<h6>Filter</h6>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Today</a></li>
|
|
<li><a class="dropdown-item" href="#">This Month</a></li>
|
|
<li><a class="dropdown-item" href="#">This Year</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Angkatan <span>| All Time</span></h5>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-calendar4-week"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>{{ $totalAngkatanCount }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Customers Card -->
|
|
|
|
<!-- === FILTER DROPDOWN & PIE CHART === -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body pt-3">
|
|
<form method="GET" action="{{ route('dashboard') }}" class="mb-3">
|
|
<label for="angkatan" class="form-label">Filter Angkatan:</label>
|
|
<select class="form-select" name="angkatan" id="angkatan"
|
|
onchange="this.form.submit()">
|
|
<option value="">Semua Angkatan</option>
|
|
@foreach ($angkatanList as $id => $tahun)
|
|
<option value="{{ $id }}"
|
|
{{ request('angkatan') == $id ? 'selected' : '' }}>
|
|
{{ $tahun }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</form>
|
|
|
|
<div id="clusterPieChart" style="height: 400px;"></div>
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<script>
|
|
Highcharts.chart('clusterPieChart', {
|
|
chart: {
|
|
type: 'pie'
|
|
},
|
|
title: {
|
|
text: 'Kesesuaian Alumni terhadap Bidang Kerja'
|
|
},
|
|
series: [{
|
|
name: 'Total',
|
|
colorByPoint: true,
|
|
data: [
|
|
@foreach ($clusterLabels as $index => $label)
|
|
{
|
|
name: "{{ $label }}",
|
|
y: {{ $clusterValues[$index] }}
|
|
}
|
|
{{ !$loop->last ? ',' : '' }}
|
|
@endforeach
|
|
]
|
|
}]
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- === END FILTER + PIE CHART === -->
|
|
<!-- Cluster Distribution Table - Row 3 -->
|
|
<div class="col-lg-12">
|
|
<div class="card dashboard-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Distribusi Cluster Alumni
|
|
@if (request('angkatan'))
|
|
<span>| Angkatan {{ $angkatanList[request('angkatan')] }}</span>
|
|
@else
|
|
<span>| Semua Angkatan</span>
|
|
@endif
|
|
</h5>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-borderless">
|
|
<thead align="center" valign="middle">
|
|
<tr>
|
|
<th scope="col">Cluster</th>
|
|
<th scope="col">Jumlah Alumni</th>
|
|
<th scope="col">Persentase</th>
|
|
<th scope="col">Keterangan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php
|
|
$totalAlumniInClusters = array_sum($clusterValues);
|
|
$clusterDescriptions = [
|
|
'TIDAK SESUAI' => 'Alumni dengan pekerjaan tidak sesuai dengan bidang kelulusan',
|
|
'KURANG SESUAI' => 'Alumni dengan pekerjaan cukup relevan dengan bidang kelulusan',
|
|
'SANGAT SESUAI' => 'Alumni dengan pekerjaan sangat sesuai dengan bidang kelulusan'
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($clusterLabels as $index => $label)
|
|
<tr>
|
|
<td>
|
|
<span class="cluster-label cluster-{{ $index }}">{{ $label }}</span>
|
|
</td>
|
|
<td>{{ $clusterValues[$index] }}</td>
|
|
<td>
|
|
@if($totalAlumniInClusters > 0)
|
|
{{ round(($clusterValues[$index] / $totalAlumniInClusters) * 100, 1) }}%
|
|
@else
|
|
0%
|
|
@endif
|
|
</td>
|
|
<td>{{ $clusterDescriptions[$label] ?? '' }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === PROFESSION TREND CHART === -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Tren Profesi Per Angkatan <span>| All Time</span></h5>
|
|
<div id="professionTrendChart"></div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const years = @json($chartYears);
|
|
const seriesData = @json($chartData);
|
|
new ApexCharts(document.querySelector("#professionTrendChart"), {
|
|
series: seriesData,
|
|
chart: {
|
|
type: 'line',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: years,
|
|
title: {
|
|
text: 'Tahun Angkatan'
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Jumlah Alumni'
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2
|
|
},
|
|
colors: ['#4154f1', '#2eca6a', '#ff771d', '#9061F9', '#ffc107'],
|
|
markers: {
|
|
size: 4,
|
|
colors: ['#fff'],
|
|
strokeColors: '#4154f1',
|
|
strokeWidth: 2
|
|
},
|
|
title: {
|
|
text: 'Distribusi Profesi Berdasarkan Angkatan',
|
|
align: 'center'
|
|
}
|
|
}).render();
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Profession Trend Chart -->
|
|
</div>
|
|
</div><!-- End Left side columns -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
/* CSS untuk memberikan warna berdasarkan kategori cluster */
|
|
.cluster-label {
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.cluster-0 {
|
|
background-color: #FFE0E0;
|
|
color: #D10000;
|
|
}
|
|
|
|
.cluster-1 {
|
|
background-color: #FFF3CD;
|
|
color: #856404;
|
|
}
|
|
|
|
.cluster-2 {
|
|
background-color: #D4EDDA;
|
|
color: #155724;
|
|
}
|
|
</style>
|
|
|
|
<!-- ======= Footer ======= -->
|
|
@include('footer')
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
|
|
class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/echarts/echarts.min.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/quill/quill.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }} "></script>
|
|
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }} "></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="{{ asset('assets/js/main.js') }}"></script>
|
|
|
|
</body>
|
|
|
|
</html> |