fix grafiks

app/Http/Controllers/DashboardController.php

@@ -19,49 +19,76 @@ class DashboardController extends Controller
     // Menampilkan dashboard pimpinan.
     public function pimpinan(Request $request)
     {
-        $currentYear = now()->year;
+        [$start, $end] = $this->getDateRange($request);
-        $start = $request->get('start_date')
+        $kloters = $this->getAllKloters();
-            ? Carbon::parse($request->get('start_date'))
+        $kloterData = $this->getKloterChartData($request->get('kloter'), $kloters);
-            : Carbon::create($currentYear, 1, 1)->startOfDay();
+        $grafikBulanan = $this->getMonthlyChartData($start, $end);
-        $end = $request->get('end_date')
+        $keuangan = $this->getTotalPendapatanPengeluaran($start, $end);
-            ? Carbon::parse($request->get('end_date'))
+        $bulanAktif = $start->translatedFormat('d M Y') . ' - ' . $end->translatedFormat('d M Y');
-            : Carbon::create($currentYear, 12, 31)->endOfDay();
+        $listKloter = HistoryGajiKloter::orderBy('id', 'asc')->get();
 
-        $kloters = HistoryGajiKloter::whereNotNull('tanggal_awal')
+        return view('dashboard.pimpinan', array_merge(
+            $grafikBulanan,
+            ['keuangan' => $keuangan],
+            ['bulanAktif' => $bulanAktif],
+            ['kloters' => $kloters],
+            ['listKloter' => $listKloter],
+            $kloterData,
+            [
+                'startDate' => $start->toDateString(),
+                'endDate' => $end->toDateString()
+            ]
+        ));
+    }
+
+    // fungsi untuk mendapatkan rentang tanggal awal dan akhir
+    protected function getDateRange(Request $request)
+    {
+        $bulan = $request->get('bulan') ?? now()->month;
+        $tahun = $request->get('tahun') ?? now()->year;
+
+        // Ambil transaksi terakhir di bulan dan tahun yang dipilih
+        $lastTransactionDate = Transaksi::whereYear('waktu_transaksi', $tahun)
+            ->whereMonth('waktu_transaksi', $bulan)
+            ->orderBy('waktu_transaksi', 'desc')
+            ->value('waktu_transaksi');
+
+        if ($lastTransactionDate) {
+            $end = Carbon::parse($lastTransactionDate)->endOfDay();
+            $start = $end->copy()->subMonth()->startOfDay();
+        } else {
+            // Jika tidak ada transaksi, gunakan awal dan akhir bulan
+            $start = Carbon::create($tahun, $bulan, 1)->startOfMonth();
+            $end = Carbon::create($tahun, $bulan, 1)->endOfMonth();
+        }
+
+        return [$start, $end];
+    }
+
+
+    // fungsi untuk mendapatkan semua kloter yang memiliki tanggal awal dan akhir
+    protected function getAllKloters()
+    {
+        return HistoryGajiKloter::whereNotNull('tanggal_awal')
             ->whereNotNull('tanggal_akhir')
             ->orderBy('id', 'desc')
             ->get();
+    }
 
-        $kloterId = $request->get('kloter');
+    // fungsi untuk mendapatkan data chart berdasarkan kloter
+    protected function getKloterChartData($kloterId, $kloters)
+    {
         $labelsKloter = [];
         $pendapatanKloter = [];
         $pengeluaranKloter = [];
 
-        if ($kloterId) {
+        $kloterList = $kloterId 
-            $selectedKloter = HistoryGajiKloter::find($kloterId);
+            ? [$kloters->where('id', $kloterId)->first()] 
+            : $kloters;
 
-            if ($selectedKloter) {
+        foreach ($kloterList as $kloter) {
-                $labelsKloter[] = $selectedKloter->nama ?? 'Kloter ' . $selectedKloter->id;
+            if (!$kloter) continue;
 
-                $pendapatanKloter[] = Transaksi::whereBetween('waktu_transaksi', [
-                        $selectedKloter->tanggal_awal,
-                        $selectedKloter->tanggal_akhir
-                    ])
-                    ->whereNotNull('pemasukan_id')
-                    ->sum('jumlahRp');
-
-                $pengeluaranKloter[] = Transaksi::whereBetween('waktu_transaksi', [
-                        $selectedKloter->tanggal_awal,
-                        $selectedKloter->tanggal_akhir
-                    ])
-                    ->where(function ($q) {
-                        $q->whereNotNull('pengeluaran_id')
-                          ->orWhereNotNull('history_gaji_kloter_id');
-                    })
-                    ->sum('jumlahRp');
-            }
-        } else {
-            foreach ($kloters as $kloter) {
             $labelsKloter[] = $kloter->nama ?? 'Kloter ' . $kloter->id;
 
             $pendapatanKloter[] = Transaksi::whereBetween('waktu_transaksi', [
@@ -81,8 +108,13 @@ public function pimpinan(Request $request)
                 })
                 ->sum('jumlahRp');
         }
+
+        return compact('labelsKloter', 'pendapatanKloter', 'pengeluaranKloter');
     }
 
+    // fungsi untuk mendapatkan data chart bulanan
+    protected function getMonthlyChartData($start, $end)
+    {
         $dates = CarbonPeriod::create($start, $end);
         $labels = [];
         $pendapatanBulanan = [];
@@ -103,8 +135,12 @@ public function pimpinan(Request $request)
                 ->sum('jumlahRp');
         }
 
-        $bulanAktif = $start->translatedFormat('d M Y') . ' - ' . $end->translatedFormat('d M Y');
+        return compact('labels', 'pendapatanBulanan', 'pengeluaranBulanan');
+    }
 
+    // fungsi untuk mendapatkan total pendapatan dan pengeluaran dalam rentang tanggal
+    protected function getTotalPendapatanPengeluaran($start, $end)
+    {
         $totalPendapatan = Transaksi::whereBetween('waktu_transaksi', [$start, $end])
             ->whereNotNull('pemasukan_id')
             ->sum('jumlahRp');
@@ -116,36 +152,76 @@ public function pimpinan(Request $request)
             })
             ->sum('jumlahRp');
 
-        $keuangan = [
+        return [
             'pendapatan' => $totalPendapatan,
             'pengeluaran' => $totalPengeluaran
         ];
-
-        /**
-         * Mengambil seluruh data dari tabel HistoryGajiKloter dan mengurutkannya berdasarkan kolom 'id' secara menurun (desc).
-         * 
-         * Fungsi kode ini adalah untuk mendapatkan daftar kloter gaji terbaru terlebih dahulu,
-         * sehingga data yang paling baru akan berada di urutan teratas pada hasil query.
-         *
-         * @var \Illuminate\Database\Eloquent\Collection $listKloter Koleksi data kloter gaji yang telah diurutkan.
-         */
-        $listKloter = HistoryGajiKloter::orderBy('id', 'asc')->get();
-        // $listKloter = HistoryGajiKloter::orderBy('id', 'desc')->get();
-
-        return view('dashboard.pimpinan', compact(
-            'labels',
-            'pendapatanBulanan',
-            'pengeluaranBulanan',
-            'keuangan',
-            'bulanAktif',
-            'kloters',
-            'listKloter',
-            'labelsKloter',
-            'pendapatanKloter',
-            'pengeluaranKloter'
-        ));
     }
 
+    public function ajaxData(Request $request)
+    {
+        $start = Carbon::parse($request->get('start_date'))->startOfDay();
+        $end = Carbon::parse($request->get('end_date'))->endOfDay();
+
+        $kloterId = $request->get('kloter_id');
+        $labelsKloter = [];
+        $pendapatanKloter = [];
+        $pengeluaranKloter = [];
+
+        if ($kloterId) {
+            $selectedKloter = HistoryGajiKloter::find($kloterId);
+            if ($selectedKloter) {
+                $labelsKloter[] = $selectedKloter->nama ?? 'Kloter ' . $selectedKloter->id;
+
+                $pendapatanKloter[] = Transaksi::whereBetween('waktu_transaksi', [
+                        $selectedKloter->tanggal_awal,
+                        $selectedKloter->tanggal_akhir
+                    ])
+                    ->whereNotNull('pemasukan_id')
+                    ->sum('jumlahRp');
+
+                $pengeluaranKloter[] = Transaksi::whereBetween('waktu_transaksi', [
+                        $selectedKloter->tanggal_awal,
+                        $selectedKloter->tanggal_akhir
+                    ])
+                    ->where(function ($q) {
+                        $q->whereNotNull('pengeluaran_id')
+                        ->orWhereNotNull('history_gaji_kloter_id');
+                    })
+                    ->sum('jumlahRp');
+            }
+        }
+
+        $dates = CarbonPeriod::create($start, $end);
+        $labels = [];
+        $pendapatanBulanan = [];
+        $pengeluaranBulanan = [];
+
+        foreach ($dates as $date) {
+            $labels[] = $date->format('d M');
+            $pendapatanBulanan[] = Transaksi::whereDate('waktu_transaksi', $date)
+                ->whereNotNull('pemasukan_id')
+                ->sum('jumlahRp');
+
+            $pengeluaranBulanan[] = Transaksi::whereDate('waktu_transaksi', $date)
+                ->where(function ($q) {
+                    $q->whereNotNull('pengeluaran_id')
+                    ->orWhereNotNull('history_gaji_kloter_id');
+                })
+                ->sum('jumlahRp');
+        }
+
+        return response()->json([
+            'labels' => $labels,
+            'pendapatanBulanan' => $pendapatanBulanan,
+            'pengeluaranBulanan' => $pengeluaranBulanan,
+            'labelsKloter' => $labelsKloter,
+            'pendapatanKloter' => $pendapatanKloter,
+            'pengeluaranKloter' => $pengeluaranKloter
+        ]);
+    }
+
+
     // Menampilkan dashboard operator
     public function operator()
     {
@@ -228,72 +304,5 @@ public function tambahUangMakanHarian()
         }
     }
 
-    public function ajaxData(Request $request)
-    {
-        // Ambil semua logika seperti di `pimpinan()`
-        $currentYear = now()->year;
-        $start = $request->get('start_date')
-            ? Carbon::parse($request->get('start_date'))
-            : Carbon::create($currentYear, 1, 1)->startOfDay();
-        $end = $request->get('end_date')
-            ? Carbon::parse($request->get('end_date'))
-            : Carbon::create($currentYear, 12, 31)->endOfDay();
     
-        $kloterId = $request->get('kloter');
-        $labelsKloter = [];
-        $pendapatanKloter = [];
-        $pengeluaranKloter = [];
-
-        if ($kloterId) {
-            $selectedKloter = HistoryGajiKloter::find($kloterId);
-            if ($selectedKloter) {
-                $labelsKloter[] = $selectedKloter->nama ?? 'Kloter ' . $selectedKloter->id;
-
-                $pendapatanKloter[] = Transaksi::whereBetween('waktu_transaksi', [
-                        $selectedKloter->tanggal_awal,
-                        $selectedKloter->tanggal_akhir
-                    ])
-                    ->whereNotNull('pemasukan_id')
-                    ->sum('jumlahRp');
-
-                $pengeluaranKloter[] = Transaksi::whereBetween('waktu_transaksi', [
-                        $selectedKloter->tanggal_awal,
-                        $selectedKloter->tanggal_akhir
-                    ])
-                    ->where(function ($q) {
-                        $q->whereNotNull('pengeluaran_id')
-                        ->orWhereNotNull('history_gaji_kloter_id');
-                    })
-                    ->sum('jumlahRp');
-            }
-        }
-
-        $dates = CarbonPeriod::create($start, $end);
-        $labels = [];
-        $pendapatanBulanan = [];
-        $pengeluaranBulanan = [];
-
-        foreach ($dates as $date) {
-            $labels[] = $date->format('d M');
-            $pendapatanBulanan[] = Transaksi::whereDate('waktu_transaksi', $date)
-                ->whereNotNull('pemasukan_id')
-                ->sum('jumlahRp');
-
-            $pengeluaranBulanan[] = Transaksi::whereDate('waktu_transaksi', $date)
-                ->where(function ($q) {
-                    $q->whereNotNull('pengeluaran_id')
-                    ->orWhereNotNull('history_gaji_kloter_id');
-                })
-                ->sum('jumlahRp');
-        }
-
-        return response()->json([
-            'labels' => $labels,
-            'pendapatanBulanan' => $pendapatanBulanan,
-            'pengeluaranBulanan' => $pengeluaranBulanan,
-            'labelsKloter' => $labelsKloter,
-            'pendapatanKloter' => $pendapatanKloter,
-            'pengeluaranKloter' => $pengeluaranKloter
-        ]);
-    }
 }

resources/views/dashboard/pimpinan.blade.php

@@ -43,10 +43,10 @@
                         </h2>
                         <form id="date-filter-form" class="flex items-center gap-2" style="padding-top: 10px">
                             <input style="width: fit-content" type="date" name="start_date" id="start_date" 
-                                value="{{ request('start_date', now()->startOfMonth()->toDateString()) }}"
+                                value="{{ request('start_date', $startDate) }}"
                                 class="filter-info border px-2 py-1 rounded text-sm">
                             <input style="width: fit-content" type="date" name="end_date" id="end_date" 
-                                value="{{ request('end_date', now()->endOfMonth()->toDateString()) }}"
+                                value="{{ request('end_date', $endDate) }}"
                                 class="filter-info border px-2 py-1 rounded text-sm">
                         </form>
                     </div>
@@ -144,8 +144,9 @@ class="filter-info border px-2 py-1 rounded text-sm">
     });
 
     // Grafik Kloter
+    let kloterChart;
     const ctxKloter = document.getElementById('kloterChart').getContext('2d');
-    const kloterChart = new Chart(ctxKloter, {
+    kloterChart = new Chart(ctxKloter, {
         type: 'line',
         data: {
             labels: {!! json_encode(array_reverse($labelsKloter)) !!},
@@ -233,10 +234,67 @@ class="filter-info border px-2 py-1 rounded text-sm">
         financeChart.update();
 
         // Update Chart Kloter
-        kloterChart.data.labels = data.labelsKloter.reverse();
+        if (kloterChart) {
-        kloterChart.data.datasets[0].data = data.pendapatanKloter.reverse();
+            kloterChart.destroy();
-        kloterChart.data.datasets[1].data = data.pengeluaranKloter.reverse();
+        }
-        kloterChart.update();
+
+        const kloterId = document.getElementById('kloterFilter').value;
+        const chartType = kloterId ? 'bar' : 'line';
+
+        // Buat ulang chart kloter dengan tipe sesuai filter
+        const ctxKloter = document.getElementById('kloterChart').getContext('2d');
+        kloterChart = new Chart(ctxKloter, {
+            type: chartType,
+            data: {
+                labels: data.labelsKloter.reverse(),
+                datasets: [
+                    {
+                        label: 'Pendapatan',
+                        data: data.pendapatanKloter.reverse(),
+                        borderColor: 'blue',
+                        backgroundColor: 'rgba(0, 123, 255, 0.6)',
+                        fill: chartType === 'bar',
+                        tension: 0.4,
+                        pointRadius: 4,
+                        pointBackgroundColor: 'blue',
+                        borderWidth: 3,
+                        showLine: chartType === 'line',
+                    },
+                    {
+                        label: 'Pengeluaran',
+                        data: data.pengeluaranKloter.reverse(),
+                        borderColor: 'red',
+                        backgroundColor: 'rgba(255, 99, 132, 0.6)',
+                        fill: chartType === 'bar',
+                        tension: 0.4,
+                        pointRadius: 4,
+                        pointBackgroundColor: 'red',
+                        borderWidth: 4,
+                        showLine: chartType === 'line',
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                elements: {
+                    line: {
+                        cubicInterpolationMode: 'monotone',
+                    }
+                },
+                spanGaps: true,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: function(value) {
+                                return 'Rp ' + value.toLocaleString('id-ID');
+                            }
+                        }
+                    }
+                }
+            }
+        });
     };
 
     const fetchChartData = () => {