You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
10 KiB
PHTML
252 lines
10 KiB
PHTML
@extends('temp.admin')
|
|
@php
|
|
use NN\Module\DB;
|
|
use NN\Module\View;
|
|
@endphp
|
|
@section("content")
|
|
|
|
<div class="content-header row">
|
|
<div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
|
|
<h3 class="content-header-title mb-0 d-inline-block">Dasbor</h3>
|
|
<div class="row breadcrumbs-top d-inline-block">
|
|
<div class="breadcrumb-wrapper col-12">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Dasbor</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-header-right col-md-6 col-12">
|
|
<div class="btn-group float-md-right">
|
|
<!-- <ul class="list-inline mb-0">
|
|
<li style="max-width:140px">
|
|
<fieldset class="form-group position-relative">
|
|
<input type="text" value="18-04-2023" class="period datepicker form-control form-control-sm input-sm mb-1" id="tglawal" placeholder="Tanggal Awal">
|
|
<div class="form-control-position">
|
|
<i class="la la-calendar-o font-small-4"></i>
|
|
</div>
|
|
</fieldset>
|
|
</li>
|
|
<li style="max-width:140px">
|
|
<fieldset class="form-group position-relative">
|
|
<input type="text"value="18-04-2023" class="period datepicker form-control form-control-sm input-sm mb-1" id="tglakhir" placeholder="Tanggal Akhir">
|
|
<div class="form-control-position">
|
|
<i class="la la-calendar-o font-small-4"></i>
|
|
</div>
|
|
</fieldset>
|
|
</li>
|
|
</ul> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-body">
|
|
<section id="dasbor">
|
|
<!-- Welcome Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="la la-user text-primary"></i>
|
|
Selamat Datang
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div style="
|
|
min-height:200px;
|
|
background-size:contain;
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
background-image:url('/usp/logo/man.png');
|
|
">
|
|
<div id="show-user"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Financial Overview Cards -->
|
|
<div class="row mb-4">
|
|
<!-- Total Simpanan -->
|
|
<div class="col-sm-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="card-title">
|
|
<i class="la la-piggy-bank text-success"></i>
|
|
Total Simpanan
|
|
</h6>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body sales-growth-chart">
|
|
<div id="monthly-sales" style="height:180px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="chart-title text-center">
|
|
<h3 id="sp" class="text-success">Rp 0</h3>
|
|
<small class="text-muted">Total saldo simpanan</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Pinjaman -->
|
|
<div class="col-sm-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="card-title">
|
|
<i class="la la-handshake-o text-warning"></i>
|
|
Total Pinjaman
|
|
</h6>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body sales-growth-chart">
|
|
<div id="donut-example" style="height:180px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="chart-title text-center">
|
|
<h3 id="pj" class="text-warning">Rp 0</h3>
|
|
<small class="text-muted">Total pinjaman aktif</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pengambilan -->
|
|
<div class="col-sm-12 col-lg-6">
|
|
<div class="card pull-up">
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="media d-flex">
|
|
<div class="media-body text-left">
|
|
<h6 class="text-muted">
|
|
<i class="la la-download text-danger"></i>
|
|
Pengambilan
|
|
</h6>
|
|
<h3 id="pb" class="text-danger">Rp 0</h3>
|
|
<small class="text-muted">Penarikan simpanan</small>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="la la-money danger font-large-1 float-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Angsuran -->
|
|
<div class="col-sm-12 col-lg-6">
|
|
<div class="card pull-up">
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="media d-flex">
|
|
<div class="media-body text-left">
|
|
<h6 class="text-muted">
|
|
<i class="la la-credit-card text-info"></i>
|
|
Angsuran
|
|
</h6>
|
|
<h3 id="ag" class="text-info">Rp 0</h3>
|
|
<small class="text-muted">Pembayaran pinjaman</small>
|
|
</div>
|
|
<div class="align-self-center">
|
|
<i class="la la-money danger font-large-1 float-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revenue Style Panel -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="la la-chart-line text-primary"></i>
|
|
Sisa Hasil Usaha (SHU)
|
|
</h4>
|
|
<div class="heading-elements">
|
|
<i class="la la-refresh text-muted cursor-pointer" id="refresh-shu"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div id="totalRevenueChart" style="height: 300px;"></div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="text-muted">Tahun Berjalan</span>
|
|
<span class="font-weight-bold text-primary" id="shu-current">Rp 0</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="text-muted">Tahun Lalu</span>
|
|
<span class="font-weight-bold text-success" id="shu-previous">Rp 0</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Pertumbuhan</span>
|
|
<span class="font-weight-bold text-info" id="shu-growth">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
@section('css')
|
|
<style>
|
|
h3{
|
|
font-size: 1rem;
|
|
}
|
|
.card-header {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.card-title {
|
|
margin-bottom: 0;
|
|
font-weight: 600;
|
|
}
|
|
.card-title i {
|
|
margin-right: 8px;
|
|
}
|
|
.heading-elements {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1.5rem;
|
|
}
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
.text-success { color: #28a745 !important; }
|
|
.text-warning { color: #ffc107 !important; }
|
|
.text-danger { color: #dc3545 !important; }
|
|
.text-info { color: #17a2b8 !important; }
|
|
.text-primary { color: var(--greenKop) !important; }
|
|
</style>
|
|
@endsection
|
|
@section('script')
|
|
<script>
|
|
(function updateGreeting(){
|
|
_setHTML('show-user', '<h1 style="color:var(--primary)">'+ucapanSelamat()+'</h1><h3 style="font-size:20px;font-weight:bold">'+_valHTML('nama-user')+'</h3>')
|
|
setTimeout(() => {
|
|
updateGreeting();
|
|
}, 500);
|
|
})();
|
|
</script>
|
|
{!! View::jsm('home/acc.js') !!}
|
|
@endsection |