923 lines
24 KiB
PHP
923 lines
24 KiB
PHP
@extends('layouts/contentNavbarLayout')
|
|
|
|
@section('title', 'Dashboard - Analytics')
|
|
|
|
@section('vendor-style')
|
|
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}">
|
|
@endsection
|
|
|
|
@section('vendor-script')
|
|
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
|
|
@endsection
|
|
|
|
@section('page-script')
|
|
<script>
|
|
"use strict";
|
|
|
|
(function () {
|
|
let cardColor, headingColor, axisColor, shadeColor, borderColor, siswa, tutor, user, users, classification;
|
|
|
|
siswa = <?php echo $siswa; ?>;
|
|
tutor = <?php echo $tutor; ?>;
|
|
classification = <?php echo $classification; ?>;
|
|
user = <?php echo $user; ?>;
|
|
users = <?php echo $users; ?>;
|
|
cardColor = config.colors.white;
|
|
headingColor = config.colors.headingColor;
|
|
axisColor = config.colors.axisColor;
|
|
borderColor = config.colors.borderColor;
|
|
|
|
// Total Revenue Report Chart - Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const totalRevenueChartEl = document.querySelector("#totalRevenueChart"),
|
|
totalRevenueChartOptions = {
|
|
series: [
|
|
{
|
|
name: "2021",
|
|
data: [18, 7, 15, 29, 18, 12, 9],
|
|
},
|
|
{
|
|
name: "2020",
|
|
data: [-13, -18, -9, -14, -5, -17, -15],
|
|
},
|
|
],
|
|
chart: {
|
|
height: 300,
|
|
stacked: true,
|
|
type: "bar",
|
|
toolbar: { show: false },
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: "33%",
|
|
borderRadius: 12,
|
|
startingShape: "rounded",
|
|
endingShape: "rounded",
|
|
},
|
|
},
|
|
colors: [config.colors.primary, config.colors.info],
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
width: 6,
|
|
lineCap: "round",
|
|
colors: [cardColor],
|
|
},
|
|
legend: {
|
|
show: true,
|
|
horizontalAlign: "left",
|
|
position: "top",
|
|
markers: {
|
|
height: 8,
|
|
width: 8,
|
|
radius: 12,
|
|
offsetX: -3,
|
|
},
|
|
labels: {
|
|
colors: axisColor,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 10,
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
padding: {
|
|
top: 0,
|
|
bottom: -8,
|
|
left: 20,
|
|
right: 20,
|
|
},
|
|
},
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
labels: {
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: axisColor,
|
|
},
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: axisColor,
|
|
},
|
|
},
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1700,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "32%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1580,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "35%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1440,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "42%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1300,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "48%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1200,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "40%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1040,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 11,
|
|
columnWidth: "48%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 991,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "30%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 840,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "35%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "28%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 640,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "32%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 576,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "37%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "45%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 420,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "52%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 380,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "60%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (
|
|
typeof totalRevenueChartEl !== undefined &&
|
|
totalRevenueChartEl !== null
|
|
) {
|
|
const totalRevenueChart = new ApexCharts(
|
|
totalRevenueChartEl,
|
|
totalRevenueChartOptions
|
|
);
|
|
totalRevenueChart.render();
|
|
}
|
|
|
|
// Growth Chart - Radial Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const growthChartEl = document.querySelector("#growthChart"),
|
|
growthChartOptions = {
|
|
series: [78],
|
|
labels: ["Growth"],
|
|
chart: {
|
|
height: 240,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
size: 150,
|
|
offsetY: 10,
|
|
startAngle: -150,
|
|
endAngle: 150,
|
|
hollow: {
|
|
size: "55%",
|
|
},
|
|
track: {
|
|
background: cardColor,
|
|
strokeWidth: "100%",
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: 15,
|
|
color: headingColor,
|
|
fontSize: "15px",
|
|
fontWeight: "600",
|
|
fontFamily: "Public Sans",
|
|
},
|
|
value: {
|
|
offsetY: -25,
|
|
color: headingColor,
|
|
fontSize: "22px",
|
|
fontWeight: "500",
|
|
fontFamily: "Public Sans",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
colors: [config.colors.primary],
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: "dark",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: [config.colors.primary],
|
|
inverseColors: true,
|
|
opacityFrom: 1,
|
|
opacityTo: 0.6,
|
|
stops: [30, 70, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 5,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -35,
|
|
bottom: -10,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (typeof growthChartEl !== undefined && growthChartEl !== null) {
|
|
const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
|
|
growthChart.render();
|
|
}
|
|
|
|
// Profit Report Line Chart
|
|
// --------------------------------------------------------------------
|
|
const profileReportChartEl = document.querySelector("#profileReportChart"),
|
|
profileReportChartConfig = {
|
|
chart: {
|
|
height: 80,
|
|
// width: 175,
|
|
type: "line",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 10,
|
|
left: 5,
|
|
blur: 3,
|
|
color: config.colors.warning,
|
|
opacity: 0.15,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
right: 8,
|
|
},
|
|
},
|
|
colors: [config.colors.warning],
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 5,
|
|
curve: "smooth",
|
|
},
|
|
series: [
|
|
{
|
|
data: [110, 270, 145, 245, 205, 285],
|
|
},
|
|
],
|
|
xaxis: {
|
|
show: false,
|
|
lines: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
},
|
|
};
|
|
if (
|
|
typeof profileReportChartEl !== undefined &&
|
|
profileReportChartEl !== null
|
|
) {
|
|
const profileReportChart = new ApexCharts(
|
|
profileReportChartEl,
|
|
profileReportChartConfig
|
|
);
|
|
profileReportChart.render();
|
|
}
|
|
|
|
// Order Statistics Chart
|
|
// --------------------------------------------------------------------
|
|
const chartOrderStatistics = document.querySelector("#orderStatisticsChart"),
|
|
orderChartConfig = {
|
|
chart: {
|
|
height: 165,
|
|
width: 130,
|
|
type: "donut",
|
|
},
|
|
labels: ["Siswa", "Siswa Tidak Aktif", "Tutor"],
|
|
series: [users.filter((item) => item.active).length, users.filter((item) => item.active == 0).length, tutor.length],
|
|
colors: [
|
|
config.colors.success,
|
|
config.colors.danger,
|
|
config.colors.primary
|
|
],
|
|
stroke: {
|
|
width: 5,
|
|
colors: cardColor,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
formatter: function (val, opt) {
|
|
return parseInt(val) + "%";
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 15,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: "75%",
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
fontSize: "1.5rem",
|
|
fontFamily: "Public Sans",
|
|
color: headingColor,
|
|
offsetY: -15,
|
|
formatter: function (val) {
|
|
return parseInt(val / (siswa.length + tutor.length) * 100) + "%";
|
|
},
|
|
},
|
|
name: {
|
|
offsetY: 20,
|
|
fontFamily: "Public Sans",
|
|
},
|
|
total: {
|
|
show: true,
|
|
fontSize: "0.8125rem",
|
|
color: axisColor,
|
|
label: "Pengguna",
|
|
formatter: function (w) {
|
|
let total = 0;
|
|
for (let i of w.config.series) {
|
|
total += i;
|
|
}
|
|
|
|
return total;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (
|
|
typeof chartOrderStatistics !== undefined &&
|
|
chartOrderStatistics !== null
|
|
) {
|
|
const statisticsChart = new ApexCharts(
|
|
chartOrderStatistics,
|
|
orderChartConfig
|
|
);
|
|
statisticsChart.render();
|
|
}
|
|
|
|
// Income Chart - Area chart
|
|
// --------------------------------------------------------------------
|
|
const incomeChartEl = document.querySelector("#incomeChart"),
|
|
incomeChartConfig = {
|
|
series: [
|
|
{
|
|
data: [24, 21, 30, 22, 42, 26, 35, 29],
|
|
},
|
|
],
|
|
chart: {
|
|
height: 215,
|
|
parentHeightOffset: 0,
|
|
parentWidthOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
type: "area",
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: "smooth",
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
markers: {
|
|
size: 6,
|
|
colors: "transparent",
|
|
strokeColors: "transparent",
|
|
strokeWidth: 4,
|
|
discrete: [
|
|
{
|
|
fillColor: config.colors.white,
|
|
seriesIndex: 0,
|
|
dataPointIndex: 7,
|
|
strokeColor: config.colors.primary,
|
|
strokeWidth: 2,
|
|
size: 6,
|
|
radius: 8,
|
|
},
|
|
],
|
|
hover: {
|
|
size: 7,
|
|
},
|
|
},
|
|
colors: [config.colors.primary],
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: shadeColor,
|
|
shadeIntensity: 0.6,
|
|
opacityFrom: 0.5,
|
|
opacityTo: 0.25,
|
|
stops: [0, 95, 100],
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
padding: {
|
|
top: -20,
|
|
bottom: -8,
|
|
left: -10,
|
|
right: 8,
|
|
},
|
|
},
|
|
xaxis: {
|
|
categories: ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: axisColor,
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
min: 10,
|
|
max: 50,
|
|
tickAmount: 4,
|
|
},
|
|
};
|
|
if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
|
|
const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
|
|
incomeChart.render();
|
|
}
|
|
|
|
// Expenses Mini Chart - Radial Chart
|
|
// --------------------------------------------------------------------
|
|
const weeklyExpensesEl = document.querySelector("#expensesOfWeek"),
|
|
weeklyExpensesConfig = {
|
|
series: [65],
|
|
chart: {
|
|
width: 60,
|
|
height: 60,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: 0,
|
|
endAngle: 360,
|
|
strokeWidth: "8",
|
|
hollow: {
|
|
margin: 2,
|
|
size: "45%",
|
|
},
|
|
track: {
|
|
strokeWidth: "50%",
|
|
background: borderColor,
|
|
},
|
|
dataLabels: {
|
|
show: true,
|
|
name: {
|
|
show: false,
|
|
},
|
|
value: {
|
|
formatter: function (val) {
|
|
return "$" + parseInt(val);
|
|
},
|
|
offsetY: 5,
|
|
color: "#697a8d",
|
|
fontSize: "13px",
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
colors: config.colors.primary,
|
|
},
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -10,
|
|
bottom: -15,
|
|
left: -10,
|
|
right: -10,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
|
|
const weeklyExpenses = new ApexCharts(
|
|
weeklyExpensesEl,
|
|
weeklyExpensesConfig
|
|
);
|
|
weeklyExpenses.render();
|
|
}
|
|
|
|
// Scatter plot
|
|
function calculateArray(level, key) {
|
|
const data = [];
|
|
for (const item of classification) {
|
|
if (item.hasil_kelas == level) {
|
|
data.push(item[key]);
|
|
}
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
// Define Data
|
|
const data = [{
|
|
// Pre-Kids
|
|
x: calculateArray("Pre-Kids", "jenjang"),
|
|
y: calculateArray("Pre-Kids", "nilai"),
|
|
name: "Pre-Kids",
|
|
mode: "markers",
|
|
type: "scatter"
|
|
}, {
|
|
// Beginner
|
|
x: calculateArray("Beginner", "jenjang"),
|
|
y: calculateArray("Beginner", "nilai"),
|
|
name: "Beginner",
|
|
mode: "markers",
|
|
type: "scatter"
|
|
}, {
|
|
// Intermediate
|
|
x: calculateArray("Intermediate", "jenjang"),
|
|
y: calculateArray("Intermediate", "nilai"),
|
|
name: "Intermediate",
|
|
mode: "markers",
|
|
type: "scatter"
|
|
}];
|
|
|
|
// Define Layout
|
|
const layout = {
|
|
xaxis: { title: "Jenjang" },
|
|
yaxis: { range: [0, 100], title: "Nilai" },
|
|
title: "Persebaran Kelas"
|
|
};
|
|
|
|
// Display with Plotly
|
|
Plotly.newPlot("scatter-plot", data, layout);
|
|
})();
|
|
</script>
|
|
@endsection
|
|
|
|
@section('content')
|
|
@if ($user->role == "Admin")
|
|
<div class="column">
|
|
<div class="col-lg-12 col-md-4 order-1">
|
|
<div class="row">
|
|
<!-- Order Statistics -->
|
|
<div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex align-items-center justify-content-between pb-0">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">Total Pengguna</h5>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex flex-column align-items-center gap-1">
|
|
<h2 class="mb-2">{{count($users) + count($tutor)}}</h2>
|
|
<span>Pengguna</span>
|
|
</div>
|
|
<div id="orderStatisticsChart"></div>
|
|
</div>
|
|
<ul class="p-0 m-0">
|
|
<li class="d-flex mb-4 pb-1">
|
|
<div class="avatar flex-shrink-0 me-3">
|
|
<span class="avatar-initial rounded bg-label-success">
|
|
<i class='bx bx-body'></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
|
<div class="me-2">
|
|
<h6 class="mb-0">Siswa</h6>
|
|
</div>
|
|
<div class="user-progress">
|
|
<small
|
|
class="fw-semibold">{{array_count_values(array_column($users->toArray(), 'active'))[1] ?? "0"}}</small>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="d-flex mb-4 pb-1">
|
|
<div class="avatar flex-shrink-0 me-3">
|
|
<span class="avatar-initial rounded bg-label-danger">
|
|
<i class='bx bx-body'></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
|
<div class="me-2">
|
|
<h6 class="mb-0">Siswa Tidak Aktif</h6>
|
|
</div>
|
|
<div class="user-progress">
|
|
<small
|
|
class="fw-semibold">{{array_count_values(array_column($users->toArray(), 'active'))[0] ?? "0"}}</small>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="d-flex mb-4 pb-1">
|
|
<div class="avatar flex-shrink-0 me-3">
|
|
<span class="avatar-initial rounded bg-label-primary">
|
|
<i class='bx bx-male'></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
|
<div class="me-2">
|
|
<h6 class="mb-0">Tutor</h6>
|
|
</div>
|
|
<div class="user-progress">
|
|
<small class="fw-semibold">{{count($tutor)}}</small>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-4">
|
|
<div class="card rounded">
|
|
<div id="scatter-plot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ Order Statistics -->
|
|
</div>
|
|
<div class="column">
|
|
<div class="col-lg-12 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">
|
|
<span class="avatar-initial rounded bg-label-success">
|
|
<i class="bx bx-md bx-body"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="fw-semibold d-block mb-1">Jumlah Siswa</span>
|
|
<h3 class="card-title mb-2">{{array_count_values(array_column($users->toArray(), 'active'))[1] ?? "0"}}</h3>
|
|
</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">
|
|
<span class="avatar-initial rounded bg-label-danger">
|
|
<i class="bx bx-md bx-body"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="fw-semibold d-block mb-1">Jumlah Siswa Tidak Aktif</span>
|
|
<h3 class="card-title mb-2">{{array_count_values(array_column($users->toArray(), 'active'))[0] ?? "0"}}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 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">
|
|
<span class="avatar-initial rounded bg-label-primary">
|
|
<i class="bx bx-md bx-male"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="fw-semibold d-block mb-1">Jumlah Tutor</span>
|
|
<h3 class="card-title mb-2">{{count($tutor)}}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="column">
|
|
<div class="col-lg-12 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 {{$user->biodata->nama}}! 🎉</h5>
|
|
@if ($user->kelas)
|
|
<p class="mb-4">Kamu sekarang memiliki akses untuk belajar di LKP Seiza, klik menu di samping untuk mulai
|
|
belajar!</p>
|
|
|
|
<a href="tables/jadwal" class="btn btn-sm btn-outline-primary">Lihat Jadwal</a>
|
|
@else
|
|
<p class="mb-4">Kamu perlu menyelesaikan placement test terlebih dahulu sebelum mulai menggunakan layanan.
|
|
</p>
|
|
|
|
<a href="tables/placement" class="btn btn-sm btn-outline-primary">Mulai Tes</a>
|
|
@endif
|
|
</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="{{asset('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>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endsection
|