update tgl 19 april2
This commit is contained in:
whywdd
parent
8358bb46b8
commit
3c5f96f420
|
|
@ -2,12 +2,87 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\HomeModel;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Carbon\Carbon;
|
||||
|
||||
class HomeController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
return view('home'); // This will return the home view
|
||||
// Get current month data
|
||||
$currentMonth = Carbon::now()->month;
|
||||
$currentYear = Carbon::now()->year;
|
||||
|
||||
// Calculate total saldo
|
||||
$totalSaldo = HomeModel::selectRaw('SUM(uang_masuk - uang_keluar) as saldo')->first()->saldo ?? 0;
|
||||
|
||||
// Calculate total uang masuk dan uang keluar
|
||||
$totalUangMasuk = HomeModel::sum('uang_masuk');
|
||||
$totalUangKeluar = HomeModel::sum('uang_keluar');
|
||||
|
||||
// Calculate current month's income and expenses
|
||||
$currentMonthUangMasuk = HomeModel::whereMonth('Tanggal', $currentMonth)
|
||||
->whereYear('Tanggal', $currentYear)
|
||||
->sum('uang_masuk');
|
||||
|
||||
$currentMonthUangKeluar = HomeModel::whereMonth('Tanggal', $currentMonth)
|
||||
->whereYear('Tanggal', $currentYear)
|
||||
->sum('uang_keluar');
|
||||
|
||||
// Calculate profit/loss
|
||||
$labaRugiTotal = $totalUangMasuk - $totalUangKeluar;
|
||||
$labaRugiBulanIni = $currentMonthUangMasuk - $currentMonthUangKeluar;
|
||||
|
||||
// Get monthly totals for chart
|
||||
$monthlyTotals = HomeModel::selectRaw('
|
||||
DATE_FORMAT(Tanggal, "%Y-%m") as periode,
|
||||
SUM(uang_masuk) as total_debit,
|
||||
SUM(uang_keluar) as total_kredit,
|
||||
SUM(uang_masuk - uang_keluar) as laba_rugi
|
||||
')
|
||||
->groupBy('periode')
|
||||
->orderBy('periode')
|
||||
->get();
|
||||
|
||||
// Get category breakdown
|
||||
$categoryTotals = HomeModel::selectRaw('
|
||||
kategori,
|
||||
SUM(uang_masuk) as total_debit,
|
||||
SUM(uang_keluar) as total_kredit,
|
||||
SUM(uang_masuk - uang_keluar) as laba_rugi
|
||||
')
|
||||
->groupBy('kategori')
|
||||
->orderBy('total_debit', 'desc')
|
||||
->get();
|
||||
|
||||
// Get recent transactions
|
||||
$recentTransactions = HomeModel::orderBy('Tanggal', 'desc')
|
||||
->limit(10)
|
||||
->get();
|
||||
|
||||
// Calculate month-over-month growth
|
||||
$lastMonthTotal = HomeModel::whereMonth('Tanggal', Carbon::now()->subMonth()->month)
|
||||
->whereYear('Tanggal', Carbon::now()->subMonth()->year)
|
||||
->sum('uang_masuk');
|
||||
|
||||
$growthPercentage = $lastMonthTotal != 0
|
||||
? (($currentMonthUangMasuk - $lastMonthTotal) / $lastMonthTotal) * 100
|
||||
: 0;
|
||||
|
||||
return view('home', compact(
|
||||
'totalSaldo',
|
||||
'totalUangMasuk',
|
||||
'totalUangKeluar',
|
||||
'currentMonthUangMasuk',
|
||||
'currentMonthUangKeluar',
|
||||
'labaRugiTotal',
|
||||
'labaRugiBulanIni',
|
||||
'monthlyTotals',
|
||||
'categoryTotals',
|
||||
'recentTransactions',
|
||||
'growthPercentage'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\LabarugiModel;
|
||||
use Illuminate\Http\Request;
|
||||
use Carbon\Carbon;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
class LabarugiController extends Controller
|
||||
{
|
||||
public function index(Request $request)
|
||||
{
|
||||
// Default periode adalah bulan ini
|
||||
$startDate = $request->input('start_date', Carbon::now()->startOfMonth()->format('Y-m-d'));
|
||||
$endDate = $request->input('end_date', Carbon::now()->endOfMonth()->format('Y-m-d'));
|
||||
|
||||
$model = new LabarugiModel();
|
||||
|
||||
// Helper function untuk menjumlahkan uang masuk
|
||||
$sumUangMasuk = "COALESCE(uang_masuk, 0) + COALESCE(uang_masuk2, 0) + COALESCE(uang_masuk3, 0) + COALESCE(uang_masuk4, 0) + COALESCE(uang_masuk5, 0)";
|
||||
|
||||
// Helper function untuk menjumlahkan uang keluar
|
||||
$sumUangKeluar = "COALESCE(uang_keluar, 0) + COALESCE(uang_keluar2, 0) + COALESCE(uang_keluar3, 0) + COALESCE(uang_keluar4, 0) + COALESCE(uang_keluar5, 0)";
|
||||
|
||||
// Mengambil data pendapatan operasional (41)
|
||||
$pendapatanPenjualan = $model->where('kode', '241001')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangMasuk) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$pendapatanJasa = $model->where('kode', '241002')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangMasuk) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
// Mengambil data pendapatan non-operasional (42)
|
||||
$pendapatanBunga = $model->where('kode', '242001')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangMasuk) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$pendapatanSewa = $model->where('kode', '242002')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangMasuk) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$pendapatanKomisi = $model->where('kode', '242003')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangMasuk) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$pendapatanLain = $model->where('kode', '242004')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangMasuk) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
// Mengambil data beban operasional (51)
|
||||
$bebanGaji = $model->where('kode', '251001')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$bebanSewa = $model->where('kode', '251002')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$bebanUtilitas = $model->where('kode', '251003')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$bebanPenyusutan = $model->where('kode', '251004')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$bebanSupplies = $model->where('kode', '251005')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$bebanIklan = $model->where('kode', '251006')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
// Mengambil data beban non-operasional (52)
|
||||
$bebanBunga = $model->where('kode', '252001')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
$bebanLain = $model->where('kode', '252002')
|
||||
->whereBetween('Tanggal', [$startDate, $endDate])
|
||||
->select(DB::raw("SUM($sumUangKeluar) as total"))
|
||||
->value('total') ?? 0;
|
||||
|
||||
// Menghitung total pendapatan
|
||||
$totalPendapatanOperasional = $pendapatanPenjualan + $pendapatanJasa;
|
||||
$totalPendapatanNonOperasional = $pendapatanBunga + $pendapatanSewa + $pendapatanKomisi + $pendapatanLain;
|
||||
$totalPendapatan = $totalPendapatanOperasional + $totalPendapatanNonOperasional;
|
||||
|
||||
// Menghitung total beban
|
||||
$totalBebanOperasional = $bebanGaji + $bebanSewa + $bebanUtilitas + $bebanPenyusutan + $bebanSupplies + $bebanIklan;
|
||||
$totalBebanNonOperasional = $bebanBunga + $bebanLain;
|
||||
$totalBeban = $totalBebanOperasional + $totalBebanNonOperasional;
|
||||
|
||||
// Menghitung laba rugi
|
||||
$totalLabaRugi = $totalPendapatan - $totalBeban;
|
||||
|
||||
return view('Labarugi', compact(
|
||||
'startDate',
|
||||
'endDate',
|
||||
'pendapatanPenjualan',
|
||||
'pendapatanJasa',
|
||||
'pendapatanBunga',
|
||||
'pendapatanSewa',
|
||||
'pendapatanKomisi',
|
||||
'pendapatanLain',
|
||||
'bebanGaji',
|
||||
'bebanSewa',
|
||||
'bebanUtilitas',
|
||||
'bebanPenyusutan',
|
||||
'bebanSupplies',
|
||||
'bebanIklan',
|
||||
'bebanBunga',
|
||||
'bebanLain',
|
||||
'totalPendapatanOperasional',
|
||||
'totalPendapatanNonOperasional',
|
||||
'totalBebanOperasional',
|
||||
'totalBebanNonOperasional',
|
||||
'totalPendapatan',
|
||||
'totalBeban',
|
||||
'totalLabaRugi'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class HomeModel extends Model
|
||||
{
|
||||
protected $table = 'laporan_transaksis';
|
||||
protected $guarded = [];
|
||||
|
||||
protected $casts = [
|
||||
'Tanggal' => 'date',
|
||||
'uang_masuk' => 'decimal:2',
|
||||
'uang_keluar' => 'decimal:2'
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class LabarugiModel extends Model
|
||||
{
|
||||
protected $table = 'laporan_transaksis';
|
||||
protected $guarded = ['id'];
|
||||
|
||||
// Konstanta untuk kode akun pendapatan (uang masuk)
|
||||
const KODE_PENDAPATAN = [
|
||||
'OPERASIONAL' => [
|
||||
'241001' => 'pendapatan penjualan',
|
||||
'241002' => 'pendapatan jasa'
|
||||
],
|
||||
'NON_OPERASIONAL' => [
|
||||
'242001' => 'pendapatan bunga',
|
||||
'242002' => 'pendapatan sewa',
|
||||
'242003' => 'pendapatan komisi',
|
||||
'242004' => 'pendapatan lain'
|
||||
]
|
||||
];
|
||||
|
||||
// Konstanta untuk kode akun beban (uang keluar)
|
||||
const KODE_BEBAN = [
|
||||
'OPERASIONAL' => [
|
||||
'251001' => 'beban gaji',
|
||||
'251002' => 'beban sewa',
|
||||
'251003' => 'beban utilitas',
|
||||
'251004' => 'beban penyusutan',
|
||||
'251005' => 'beban supplies',
|
||||
'251006' => 'beban iklan'
|
||||
],
|
||||
'NON_OPERASIONAL' => [
|
||||
'252001' => 'beban bunga',
|
||||
'252002' => 'beban lain'
|
||||
]
|
||||
];
|
||||
|
||||
// Scope untuk filter berdasarkan periode
|
||||
public function scopePeriode($query, $startDate, $endDate)
|
||||
{
|
||||
return $query->whereBetween('Tanggal', [$startDate, $endDate]);
|
||||
}
|
||||
|
||||
// Scope untuk pendapatan operasional (uang masuk)
|
||||
public function scopePendapatanOperasional($query)
|
||||
{
|
||||
return $query->whereIn('kode', array_keys(self::KODE_PENDAPATAN['OPERASIONAL']));
|
||||
}
|
||||
|
||||
// Scope untuk pendapatan non-operasional (uang masuk)
|
||||
public function scopePendapatanNonOperasional($query)
|
||||
{
|
||||
return $query->whereIn('kode', array_keys(self::KODE_PENDAPATAN['NON_OPERASIONAL']));
|
||||
}
|
||||
|
||||
// Scope untuk beban operasional (uang keluar)
|
||||
public function scopeBebanOperasional($query)
|
||||
{
|
||||
return $query->whereIn('kode', array_keys(self::KODE_BEBAN['OPERASIONAL']));
|
||||
}
|
||||
|
||||
// Scope untuk beban non-operasional (uang keluar)
|
||||
public function scopeBebanNonOperasional($query)
|
||||
{
|
||||
return $query->whereIn('kode', array_keys(self::KODE_BEBAN['NON_OPERASIONAL']));
|
||||
}
|
||||
|
||||
// Helper untuk mengecek apakah kode termasuk pendapatan
|
||||
public static function isPendapatan($kode)
|
||||
{
|
||||
return in_array($kode, array_merge(
|
||||
array_keys(self::KODE_PENDAPATAN['OPERASIONAL']),
|
||||
array_keys(self::KODE_PENDAPATAN['NON_OPERASIONAL'])
|
||||
));
|
||||
}
|
||||
|
||||
// Helper untuk mengecek apakah kode termasuk beban
|
||||
public static function isBeban($kode)
|
||||
{
|
||||
return in_array($kode, array_merge(
|
||||
array_keys(self::KODE_BEBAN['OPERASIONAL']),
|
||||
array_keys(self::KODE_BEBAN['NON_OPERASIONAL'])
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -141,12 +141,32 @@
|
|||
<span>Data Karyawan</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="{{ route('Laporan.index') }}" class="nav-link flex items-center p-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
<li class="mb-4 relative group">
|
||||
<button class="nav-link w-full flex items-center justify-between p-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-file-alt mr-3"></i>
|
||||
<span>Laporan</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu hidden absolute left-0 mt-2 w-full bg-blue-600 rounded-lg shadow-lg">
|
||||
<li>
|
||||
<a href="{{ route('Laporan.index') }}" class="block px-4 py-2 text-white hover:bg-blue-700">
|
||||
Jurnal Umum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('rekening.index') }}" class="block px-4 py-2 text-white hover:bg-blue-700">
|
||||
Rekening
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('neracasaldo.index') }}" class="block px-4 py-2 text-white hover:bg-blue-700">
|
||||
Neraca Saldo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="{{ route('User.index') }}" class="nav-link flex items-center p-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
<i class="fas fa-user mr-3"></i>
|
||||
|
|
@ -167,12 +187,32 @@
|
|||
<span>Uang Keluar</span>
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="mb-4">
|
||||
<a href="{{ route('Laporan.index') }}" class="nav-link flex items-center p-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
<li class="mb-4 relative group">
|
||||
<button class="nav-link w-full flex items-center justify-between p-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-file-alt mr-3"></i>
|
||||
<span>Laporan</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu hidden absolute left-0 mt-2 w-full bg-blue-600 rounded-lg shadow-lg">
|
||||
<li>
|
||||
<a href="{{ route('Laporan.index') }}" class="block px-4 py-2 text-white hover:bg-blue-700">
|
||||
Jurnal Umum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('rekening.index') }}" class="block px-4 py-2 text-white hover:bg-blue-700">
|
||||
Rekening
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('neracasaldo.index') }}" class="block px-4 py-2 text-white hover:bg-blue-700">
|
||||
Neraca Saldo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="{{ route('User.index') }}" class="nav-link flex items-center p-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
<i class="fas fa-user mr-3"></i>
|
||||
|
|
@ -272,6 +312,24 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Dropdown menu functionality
|
||||
document.querySelectorAll('.group').forEach(dropdown => {
|
||||
const button = dropdown.querySelector('button');
|
||||
const menu = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
menu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!dropdown.contains(e.target)) {
|
||||
menu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!sidebar.contains(e.target) && !mobileMenuButton.contains(e.target)) {
|
||||
|
|
|
|||
|
|
@ -1,197 +1,334 @@
|
|||
@extends('Core.Sidebar')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="max-w-full bg-gradient-to-br from-indigo-50 to-blue-50 rounded-lg shadow-md dark:bg-gray-800 p-6">
|
||||
<!-- Menambahkan elemen select di atas tampilan dengan desain yang lebih menarik -->
|
||||
<!-- Filter Section -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-bold text-indigo-700 dark:text-white">Dashboard</h2>
|
||||
<select class="sm:ml-auto mt-3 sm:mt-0 sm:w-auto form-select box bg-white border border-indigo-200 rounded-lg text-indigo-600 font-medium focus:ring-2 focus:ring-indigo-300 focus:border-indigo-300">
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="yearly">Yearly</option>
|
||||
<option value="custom-date">Custom Date</option>
|
||||
<h2 class="text-xl font-bold text-indigo-700 dark:text-white">Dashboard Keuangan</h2>
|
||||
<select id="period-selector" class="sm:ml-auto mt-3 sm:mt-0 sm:w-auto form-select box bg-white border border-indigo-200 rounded-lg text-indigo-600 font-medium focus:ring-2 focus:ring-indigo-300 focus:border-indigo-300">
|
||||
<option value="daily">Harian</option>
|
||||
<option value="weekly">Mingguan</option>
|
||||
<option value="monthly" selected>Bulanan</option>
|
||||
<option value="yearly">Tahunan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Card dengan desain yang lebih modern dan berwarna -->
|
||||
<div class="flex justify-between pb-4 mb-4 border-b border-indigo-100 dark:border-gray-700 bg-white rounded-xl p-4 shadow-sm">
|
||||
<!-- Main Metrics -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<!-- Total Saldo Card -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-lg bg-indigo-100 dark:bg-indigo-700 flex items-center justify-center me-3">
|
||||
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 19">
|
||||
<path d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z"/>
|
||||
<path d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z"/>
|
||||
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center me-3">
|
||||
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="leading-none text-2xl font-bold text-indigo-800 dark:text-white pb-1">3.4k</h5>
|
||||
<p class="text-sm font-medium text-indigo-500 dark:text-indigo-300">Leads generated per week</p>
|
||||
<p class="text-sm text-gray-500 mb-1">Total Saldo</p>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Rp {{ number_format($totalSaldo, 0, ',', '.') }}</h3>
|
||||
<p class="text-sm {{ $growthPercentage >= 0 ? 'text-green-500' : 'text-red-500' }}">
|
||||
{{ $growthPercentage >= 0 ? '↑' : '↓' }} {{ abs(round($growthPercentage, 1)) }}% dari bulan lalu
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Debit Card -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center me-3">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="bg-emerald-100 text-emerald-600 text-xs font-bold inline-flex items-center px-3 py-1.5 rounded-lg dark:bg-emerald-900 dark:text-emerald-300">
|
||||
<svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4"/>
|
||||
<p class="text-sm text-gray-500 mb-1">Total Debit</p>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Rp {{ number_format($totalUangMasuk, 0, ',', '.') }}</h3>
|
||||
<p class="text-sm text-gray-500">Bulan Ini: Rp {{ number_format($currentMonthUangMasuk, 0, ',', '.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Kredit Card -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center me-3">
|
||||
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
|
||||
</svg>
|
||||
42.5%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">Total Kredit</p>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Rp {{ number_format($totalUangKeluar, 0, ',', '.') }}</h3>
|
||||
<p class="text-sm text-gray-500">Bulan Ini: Rp {{ number_format($currentMonthUangKeluar, 0, ',', '.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid dengan cards metrics yang lebih menarik -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="bg-gradient-to-r from-purple-50 to-indigo-50 p-4 rounded-xl shadow-sm">
|
||||
<dl class="flex items-center">
|
||||
<dt class="text-purple-500 dark:text-purple-300 text-sm font-medium me-1">Money spent:</dt>
|
||||
<dd class="text-purple-700 text-sm dark:text-white font-bold">$3,232</dd>
|
||||
</dl>
|
||||
<!-- Profit/Loss Section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<!-- Total Profit/Loss Card -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||||
<h4 class="text-lg font-semibold text-gray-700 mb-4">Selisih Total (Debit - Kredit)</h4>
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-lg {{ $labaRugiTotal >= 0 ? 'bg-green-100' : 'bg-red-100' }} flex items-center justify-center me-3">
|
||||
<svg class="w-6 h-6 {{ $labaRugiTotal >= 0 ? 'text-green-600' : 'text-red-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $labaRugiTotal >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3' }}"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold {{ $labaRugiTotal >= 0 ? 'text-green-600' : 'text-red-600' }}">
|
||||
Rp {{ number_format(abs($labaRugiTotal), 0, ',', '.') }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">{{ $labaRugiTotal >= 0 ? 'Debit Lebih Besar' : 'Kredit Lebih Besar' }}</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl shadow-sm">
|
||||
<dl class="flex items-center justify-end">
|
||||
<dt class="text-blue-500 dark:text-blue-300 text-sm font-medium me-1">Conversion rate:</dt>
|
||||
<dd class="text-blue-700 text-sm dark:text-white font-bold">1.2%</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-6 flex-col md:flex-row gap-4">
|
||||
<!-- Chart dengan background yang lebih menarik -->
|
||||
<div class="flex-1 bg-white p-4 rounded-xl shadow-sm">
|
||||
<h4 class="text-lg font-bold text-gray-700 mb-2">Sales Analytics</h4>
|
||||
<canvas id="vertical-bar-chart-widget" height="200" class="mt-4"></canvas>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<!-- Current Month Balance Card -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||||
<h4 class="text-lg font-semibold text-gray-700 mb-4">Selisih Bulan Ini</h4>
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-lg {{ $labaRugiBulanIni >= 0 ? 'bg-green-100' : 'bg-red-100' }} flex items-center justify-center me-3">
|
||||
<svg class="w-6 h-6 {{ $labaRugiBulanIni >= 0 ? 'text-green-600' : 'text-red-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $labaRugiBulanIni >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3' }}"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold {{ $labaRugiBulanIni >= 0 ? 'text-green-600' : 'text-red-600' }}">
|
||||
Rp {{ number_format(abs($labaRugiBulanIni), 0, ',', '.') }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">{{ $labaRugiBulanIni >= 0 ? 'Debit Lebih Besar' : 'Kredit Lebih Besar' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Section -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<!-- Bar Chart -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm">
|
||||
<h4 class="text-lg font-semibold text-gray-700 mb-4">Tren Debit & Kredit</h4>
|
||||
<div class="chart-container">
|
||||
<canvas id="financial-trend-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Chart -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm">
|
||||
<h4 class="text-lg font-semibold text-gray-700 mb-4">Distribusi per Kategori</h4>
|
||||
<div class="chart-container">
|
||||
<canvas id="category-distribution-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Transactions Table -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<h4 class="text-lg font-semibold text-gray-700">Transaksi Terbaru</h4>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kode</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategori</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Keterangan</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Debit</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kredit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@foreach($recentTransactions as $transaction)
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ date('d/m/Y', strtotime($transaction->Tanggal)) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $transaction->kode }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $transaction->kategori }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $transaction->keterangan }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">
|
||||
{{ $transaction->uang_masuk > 0 ? 'Rp ' . number_format($transaction->uang_masuk, 0, ',', '.') : '-' }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">
|
||||
{{ $transaction->uang_keluar > 0 ? 'Rp ' . number_format($transaction->uang_keluar, 0, ',', '.') : '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const ctx = document.getElementById('vertical-bar-chart-widget').getContext('2d');
|
||||
const myChart = new Chart(ctx, {
|
||||
console.log('DOM Loaded');
|
||||
|
||||
// Debug data
|
||||
const monthlyData = @json($monthlyTotals);
|
||||
const categoryData = @json($categoryTotals);
|
||||
console.log('Monthly Data:', monthlyData);
|
||||
console.log('Category Data:', categoryData);
|
||||
|
||||
// Format number to Rupiah
|
||||
function formatRupiah(number) {
|
||||
return 'Rp ' + number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
||||
}
|
||||
|
||||
try {
|
||||
// Financial Trend Chart
|
||||
const trendCtx = document.getElementById('financial-trend-chart');
|
||||
console.log('Trend Chart Element:', trendCtx);
|
||||
|
||||
if (trendCtx) {
|
||||
const labels = monthlyData.map(item => {
|
||||
const [year, month] = item.periode.split('-');
|
||||
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'];
|
||||
return `${monthNames[parseInt(month)-1]} ${year}`;
|
||||
});
|
||||
const debitData = monthlyData.map(item => parseFloat(item.total_debit) || 0);
|
||||
const kreditData = monthlyData.map(item => parseFloat(item.total_kredit) || 0);
|
||||
|
||||
new Chart(trendCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Sales',
|
||||
data: [12, 19, 14, 24, 16, 28],
|
||||
backgroundColor: [
|
||||
'rgba(79, 70, 229, 0.7)',
|
||||
'rgba(59, 130, 246, 0.7)',
|
||||
'rgba(16, 185, 129, 0.7)',
|
||||
'rgba(236, 72, 153, 0.7)',
|
||||
'rgba(245, 158, 11, 0.7)',
|
||||
'rgba(139, 92, 246, 0.7)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(79, 70, 229, 1)',
|
||||
'rgba(59, 130, 246, 1)',
|
||||
'rgba(16, 185, 129, 1)',
|
||||
'rgba(236, 72, 153, 1)',
|
||||
'rgba(245, 158, 11, 1)',
|
||||
'rgba(139, 92, 246, 1)'
|
||||
],
|
||||
label: 'Debit',
|
||||
data: debitData,
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.5)',
|
||||
borderColor: 'rgb(34, 197, 94)',
|
||||
borderWidth: 1,
|
||||
borderRadius: 6
|
||||
order: 2
|
||||
}, {
|
||||
label: 'Kredit',
|
||||
data: kreditData,
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.5)',
|
||||
borderColor: 'rgb(239, 68, 68)',
|
||||
borderWidth: 1,
|
||||
order: 2
|
||||
}, {
|
||||
label: 'Selisih',
|
||||
data: debitData.map((debit, index) => debit - kreditData[index]),
|
||||
type: 'line',
|
||||
borderColor: 'rgb(59, 130, 246)',
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
order: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(226, 232, 240, 0.7)'
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return formatRupiah(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + formatRupiah(context.parsed.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Category Distribution Chart
|
||||
const categoryCtx = document.getElementById('category-distribution-chart');
|
||||
console.log('Category Chart Element:', categoryCtx);
|
||||
|
||||
if (categoryCtx) {
|
||||
const categories = categoryData.map(item => item.kategori);
|
||||
const totalDebitPerCategory = categoryData.map(item => parseFloat(item.total_debit) || 0);
|
||||
const totalKreditPerCategory = categoryData.map(item => parseFloat(item.total_kredit) || 0);
|
||||
|
||||
new Chart(categoryCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: categories,
|
||||
datasets: [{
|
||||
label: 'Debit',
|
||||
data: totalDebitPerCategory,
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.5)',
|
||||
borderColor: 'rgb(34, 197, 94)',
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: 'Kredit',
|
||||
data: totalKreditPerCategory,
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.5)',
|
||||
borderColor: 'rgb(239, 68, 68)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return formatRupiah(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + formatRupiah(context.parsed.x);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating charts:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Card laporan penjualan dengan design yang lebih menarik -->
|
||||
<div class="md:w-1/3 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl p-6 flex flex-col justify-center text-white shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag w-12 h-12 text-white/80 mb-4">
|
||||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
||||
</svg>
|
||||
<div class="relative text-4xl font-bold mb-2">
|
||||
<span class="absolute text-2xl font-medium top-0 left-0 -ml-1">$</span> 54.143
|
||||
</div>
|
||||
<div class="bg-white/20 text-white px-3 py-1 rounded-full inline-flex items-center text-sm font-bold mt-2 w-fit">
|
||||
47%
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up w-4 h-4 ml-1">
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-4 text-white/80 text-sm">Sales earnings this month after associated author fees, & before taxes.</div>
|
||||
<button class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold px-6 py-3 rounded-full mt-6 transition flex items-center justify-between">
|
||||
Download Reports
|
||||
<span class="w-8 h-8 flex justify-center items-center bg-indigo-600 text-white rounded-full ml-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right w-4 h-4">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer element dengan design yang lebih baik -->
|
||||
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between mt-6 pt-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<!-- Button dengan design yang lebih menarik -->
|
||||
<button
|
||||
id="dropdownDefaultButton"
|
||||
data-dropdown-toggle="lastDaysdropdown"
|
||||
data-dropdown-placement="bottom"
|
||||
class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 text-center inline-flex items-center dark:hover:text-white bg-indigo-50 px-4 py-2 rounded-lg hover:bg-indigo-100 transition"
|
||||
type="button">
|
||||
Last 7 days
|
||||
<svg class="w-3 h-3 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div id="lastDaysdropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-md w-44 dark:bg-gray-700">
|
||||
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-600 dark:hover:text-white">Yesterday</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-600 dark:hover:text-white">Today</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-600 dark:hover:text-white">Last 7 days</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-600 dark:hover:text-white">Last 30 days</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-600 dark:hover:text-white">Last 90 days</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="uppercase text-sm font-bold inline-flex items-center rounded-lg text-indigo-600 hover:text-indigo-700 dark:hover:text-indigo-400 bg-indigo-50 hover:bg-indigo-100 dark:hover:bg-indigo-700 dark:bg-indigo-800 px-4 py-2 transition">
|
||||
Leads Report
|
||||
<svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
@extends('Core.Sidebar')
|
||||
|
||||
@section('content')
|
||||
<title>Laporan Laba Rugi</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<!-- CSRF Token -->
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<div class="box p-4 intro-y mt-5">
|
||||
<div class="intro-y">
|
||||
<!-- Header -->
|
||||
<div class="mb-4 bg-blue-600 text-white p-4 rounded-lg shadow-md">
|
||||
<h1 class="text-2xl font-bold text-center">CV. Budivespaendut</h1>
|
||||
<h2 class="text-xl font-semibold text-center mt-2">Laporan Laba Rugi</h2>
|
||||
<p class="text-center">Periode: {{ date('d F Y', strtotime($startDate)) }} - {{ date('d F Y', strtotime($endDate)) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Tanggal -->
|
||||
<!-- <div class="mb-4">
|
||||
<form method="GET" action="{{ url('/laporan-laba-rugi') }}" class="flex gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Tanggal Awal</label>
|
||||
<input type="date" name="start_date" value="{{ $startDate }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Tanggal Akhir</label>
|
||||
<input type="date" name="end_date" value="{{ $endDate }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
|
||||
</div>
|
||||
<div class="self-end">
|
||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div> -->
|
||||
|
||||
<!-- Tabel Laporan Laba Rugi -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white border-collapse">
|
||||
<!-- Pendapatan Operasional -->
|
||||
<tr class="bg-gray-100 font-bold">
|
||||
<td colspan="3" class="border p-2">Pendapatan Operasional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Pendapatan Penjualan</td>
|
||||
<td class="border p-2 text-right">{{ number_format($pendapatanPenjualan ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Pendapatan Jasa</td>
|
||||
<td class="border p-2 text-right">{{ number_format($pendapatanJasa ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr class="font-bold bg-gray-50">
|
||||
<td class="border p-2">Total Pendapatan Operasional</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalPendapatanOperasional ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Pendapatan Non-Operasional -->
|
||||
<tr class="bg-gray-100 font-bold">
|
||||
<td colspan="3" class="border p-2">Pendapatan Non-Operasional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Pendapatan Bunga</td>
|
||||
<td class="border p-2 text-right">{{ number_format($pendapatanBunga ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Pendapatan Sewa</td>
|
||||
<td class="border p-2 text-right">{{ number_format($pendapatanSewa ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Pendapatan Komisi</td>
|
||||
<td class="border p-2 text-right">{{ number_format($pendapatanKomisi ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Pendapatan Lain</td>
|
||||
<td class="border p-2 text-right">{{ number_format($pendapatanLain ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr class="font-bold bg-gray-50">
|
||||
<td class="border p-2">Total Pendapatan Non-Operasional</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalPendapatanNonOperasional ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Total Seluruh Pendapatan -->
|
||||
<tr class="font-bold bg-blue-50">
|
||||
<td class="border p-2">Total Pendapatan</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalPendapatan ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Beban Operasional -->
|
||||
<tr class="bg-gray-100 font-bold">
|
||||
<td colspan="3" class="border p-2">Beban Operasional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Gaji</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanGaji ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Sewa</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanSewa ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Utilitas</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanUtilitas ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Penyusutan</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanPenyusutan ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Supplies</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanSupplies ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Iklan</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanIklan ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr class="font-bold bg-gray-50">
|
||||
<td class="border p-2">Total Beban Operasional</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalBebanOperasional ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Beban Non-Operasional -->
|
||||
<tr class="bg-gray-100 font-bold">
|
||||
<td colspan="3" class="border p-2">Beban Non-Operasional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Bunga</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanBunga ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border p-2 pl-4">Beban Lain</td>
|
||||
<td class="border p-2 text-right">{{ number_format($bebanLain ?? 0, 0, ',', '.') }}</td>
|
||||
<td class="border p-2"></td>
|
||||
</tr>
|
||||
<tr class="font-bold bg-gray-50">
|
||||
<td class="border p-2">Total Beban Non-Operasional</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalBebanNonOperasional ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Total Seluruh Beban -->
|
||||
<tr class="font-bold bg-red-50">
|
||||
<td class="border p-2">Total Beban</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalBeban ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Total Laba/Rugi -->
|
||||
<tr class="font-bold text-lg {{ $totalLabaRugi >= 0 ? 'bg-green-100' : 'bg-red-100' }}">
|
||||
<td class="border p-2">Total Laba/Rugi</td>
|
||||
<td class="border p-2"></td>
|
||||
<td class="border p-2 text-right">{{ number_format($totalLabaRugi ?? 0, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
<div class="intro-y">
|
||||
<!-- Header -->
|
||||
<div class="mb-4 bg-blue-600 text-white p-4 rounded-lg shadow-md">
|
||||
<h1 class="text-2xl font-bold">Laporan Keuangan</h1>
|
||||
<p class="text-sm mt-1">Halaman ini menampilkan semua laporan keuangan.</p>
|
||||
<h1 class="text-2xl font-bold">Jurnal Umum</h1>
|
||||
<p class="text-sm mt-1">Halaman ini menampilkan jurnal umum.</p>
|
||||
</div>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<!-- Summary Cards
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white p-4 rounded-lg shadow">
|
||||
<h3 class="text-gray-500 text-sm">Total Pendapatan</h3>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<p class="text-2xl font-bold text-gray-700">Rp {{ number_format(($saldo < 0) ? $saldo : 0, 0, ',', '.') }}</p>
|
||||
<p class="text-sm text-gray-400">Data realtime keuangan</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Enhanced Filter Section -->
|
||||
<div class="flex flex-wrap gap-4 px-6 py-4 border-b border-gray-200">
|
||||
|
|
|
|||
|
|
@ -68,4 +68,38 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-y col-span-12 flex flex-wrap sm:flex-row sm:flex-nowrap items-center py-5 px-4 bg-white rounded-md shadow-md">
|
||||
<!-- Filter Rows per Page -->
|
||||
<div class="flex items-center space-x-2 flex-grow">
|
||||
<label for="rowsPerPage" class="text-sm font-medium">Rows per page:</label>
|
||||
<select id="rowsPerPage" class="border rounded-md py-3 px-6 ml-1 text-sm focus:outline-none focus:ring focus:border-blue-300">
|
||||
<option value="5" selected>5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="all">All</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div class="flex items-center space-x-4 ml-2">
|
||||
<button id="prevPage" class="text-sm px-3 py-2 border rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none">Previous</button>
|
||||
<span id="pageIndicator" class="text-sm font-medium">Page 1</span>
|
||||
<button id="nextPage" class="text-sm px-3 py-2 border rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-between items-center mt-4 mb-4">
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('laporan.export-excel') }}" class="btn bg-green-500 text-white hover:bg-green-600">
|
||||
<i class="fas fa-file-excel mr-2"></i>Export Excel
|
||||
</a>
|
||||
<a href="{{ route('laporan.export-pdf') }}" class="btn bg-red-500 text-white hover:bg-red-600">
|
||||
<i class="fas fa-file-pdf mr-2"></i>Export PDF
|
||||
</a>
|
||||
<button onclick="window.print()" class="btn bg-gray-500 text-white hover:bg-gray-600">
|
||||
<i class="fas fa-print mr-2"></i>Print
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
use App\Http\Controllers\AuthController;
|
||||
use App\Http\Controllers\RekeningController;
|
||||
use App\Http\Controllers\NeracasaldoController;
|
||||
use App\Http\Controllers\LabarugiController;
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Web Routes
|
||||
|
|
@ -69,4 +70,5 @@
|
|||
Route::get('/rekening/export-excel', [RekeningController::class, 'exportExcel'])->name('rekening.export-excel');
|
||||
Route::get('/rekening/export-pdf', [RekeningController::class, 'exportPDF'])->name('rekening.export-pdf');
|
||||
Route::resource('neracasaldo', NeracasaldoController::class);
|
||||
Route::get('/laporan-laba-rugi', [LabarugiController::class, 'index'])->name('labarugi.index');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue