Merge pull request 'FEAT : Update Dashboard' (#6) from roy into main

Reviewed-on: #6

app/Http/Controllers/DashboardController.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Modules\Itsecurity\Models\Master\JenisForm;
+use Modules\Itsecurity\Models\Pengajuan\Permohonan;
+
+class DashboardController extends Controller
+{
+    public function index()
+    {
+        $formCounts = JenisForm::withCount('permohonan')
+            ->get()
+            ->map(function ($jenisForm) {
+                return [
+                    'kode_form' => $jenisForm->kode_form,
+                    'nama_form' => $jenisForm->nama_form,
+                    'total' => $jenisForm->permohonan_count,
+                ];
+            });
+
+        return view('welcome', compact('formCounts'));
+    }
+
+    // public function headerNotification()
+    // {
+    //     $user = Auth::user();
+
+    //     // Ambil permohonan terbaru oleh user yang login
+    //     $permohonanTerbaru = Permohonan::with('jenisForm')
+    //         ->where('nik', $user->nik)
+    //         ->whereDate('created_at', now()->toDateString()) // Hanya hari ini
+    //         ->latest()
+    //         ->first();
+
+    //     $notification = null;
+
+    //     if ($permohonanTerbaru && $permohonanTerbaru->jenisForm?->kode_form === 'S1000') {
+    //         $tanggal = \Carbon\Carbon::parse($permohonanTerbaru->created_at)->format('d M Y');
+    //         $notification = "Kamu baru saja membuat permohonan firewall pada tanggal $tanggal.";
+    //     }
+
+    //     return view('dashboard.index', compact('notification'));
+    // }
+}

bootstrap/providers.php

@@ -3,4 +3,5 @@
 return [
     App\Providers\AppServiceProvider::class,
     App\Providers\MenuServiceProvider::class,
+    App\Providers\ViewServiceProvider::class,
 ];

composer.json

@@ -10,9 +10,8 @@
         "daengdeni/authentication-module": "dev-master",
         "daengdeni/laravel-id-generator": "^1.0",
         "daengdeni/logs-module": "dev-master",
-        "rasyahroel/usermanagement-module": "dev-master",
-        "rasyahroel/itsecurity": "dev-main",
         "diglactic/laravel-breadcrumbs": "^10.0",
+        "doctrine/dbal": "^4.2",
         "intervention/image": "^3.10",
         "joshbrw/laravel-module-installer": "^2.0",
         "laravel/framework": "^12.0",
@@ -21,6 +20,8 @@
         "maatwebsite/excel": "^3.1",
         "nwidart/laravel-modules": "^11.0",
         "opcodesio/log-viewer": "^3.10",
+        "rasyahroel/itsecurity": "dev-main",
+        "rasyahroel/usermanagement-module": "dev-master",
         "spatie/laravel-activitylog": "^4.8",
         "spatie/laravel-pdf": "^1.5",
         "spatie/laravel-permission": "^6.9",

public/build-itsecurity/.vite/manifest.json

@@ -0,0 +1,14 @@
+{
+  "resources/assets/js/app.js": {
+    "file": "assets/app-l0sNRNKZ.js",
+    "name": "app",
+    "src": "resources/assets/js/app.js",
+    "isEntry": true
+  },
+  "resources/assets/sass/app.scss": {
+    "file": "assets/app-DP2rzg_V.js",
+    "name": "app",
+    "src": "resources/assets/sass/app.scss",
+    "isEntry": true
+  }
+}

public/build-itsecurity/assets/app-DP2rzg_V.js

@@ -0,0 +1 @@
+

public/build-itsecurity/assets/app-l0sNRNKZ.js

@@ -0,0 +1 @@
+

resources/views/welcome.blade.php

@@ -1,68 +1,168 @@
 @extends('layouts.main')
 
 @section('content')
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header">{{ __('Dashboard') }}</div>
+    <div class="py-4">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
+            {{--  Count Form  --}}
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 h-full">
+                @forelse ($formCounts as $form)
+                    <div
+                        class="card bg-cover bg-no-repeat rtl:bg-[left_top_-1.7rem] bg-[right_top_-1.7rem] channel-stats-bg h-full p-5 transition duration-300 transform hover:shadow-lg hover:scale-[1.02] hover:bg-gradient-to-r hover:from-agi-50 hover:to-white cursor-pointer">
+                        <div class="grid grid-cols-2 items-center h-full gap-2">
+                            <div class="text-center text-4xl font-bold text-gray-900">
+                                {{ $form['total'] }}
+                                <div class="text-sm font-medium text-gray-500 mt-1">Data</div>
+                            </div>
 
+                            <div class="text-left">
+                                <div class="text-sm text-primary font-semibold">
+                                    {{ $form['kode_form'] }}
+                                </div>
+                                <div class="text-base text-gray-700">
+                                    {{ $form['nama_form'] }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @empty
+                    <div class="col-span-full">
+                        <div class="alert alert-warning text-center">
+                            Belum ada data permohonan.
+                        </div>
+                    </div>
+                @endforelse
+            </div>
+
+            {{--  Chart  --}}
+            <div class="card border border-agi-100 h-full w-full">
+                <div class="card-header bg-agi-50 py-5 flex-wrap">
+                    <h3 class="card-title">
+                        Data Laporan Statistik Pengajuan
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="p-5">
+                        <div class="chart-container flex justify-center items-center">
+                            <canvas id="dashboardChart" class="max-w-full max-h-full"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
+            {{--  Report History User  --}}
+            <div class="grid my-5 gap-5 lg:gap-7.5">
+                <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false"
+                    data-datatable-page-size="5" data-datatable-state-save="false" id="dashboardreport-table"
+                    data-api-url="{{ route('report.laporanhistory.datatables') }}">
+                    <div class="card-header bg-agi-50 py-5 flex-wrap">
+                        <h3 class="card-title">
+                            Report History User Akses
+                        </h3>
+                    </div>
                     <div class="card-body">
-                        <div class="row">
-                            <!-- Kotak 1 -->
-                            <div class="col-md-2 mb-4">
-                                <div class="card shadow-sm">
-                                    <div class="card-body">
-                                        <h5 class="card-title">Kotak 1</h5>
-                                        <span class="badge bg-danger position-absolute top-0 end-0 m-3">10</span>
-                                        <!-- Icon lonceng -->
-                                        <i class="bi bi-bell position-absolute top-0 end-0 m-3"></i>
-                                    </div>
+                        <div class="scrollable-x-auto">
+                            <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
+                                data-datatable-table="true">
+                                <thead>
+                                    <tr>
+                                        <th class="min-w-[100px]" data-datatable-column="nik">
+                                            <span class="sort"> <span class="sort-label"> NIK </span>
+                                                <span class="sort-icon"> </span> </span>
+                                        </th>
+                                        <th class="min-w-[100px]" data-datatable-column="name">
+                                            <span class="sort"> <span class="sort-label"> Nama User </span>
+                                                <span class="sort-icon"> </span> </span>
+                                        </th>
+                                        <th class="min-w-[100px]" data-datatable-column="unit">
+                                            <span class="sort"> <span class="sort-label"> Unit </span>
+                                                <span class="sort-icon"> </span> </span>
+                                        </th>
+                                        <th class="min-w-[100px]" data-datatable-column="jenis_form">
+                                            <span class="sort"> <span class="sort-label"> Akses Yang Di Miliki </span>
+                                                <span class="sort-icon"> </span> </span>
+                                        </th>
+                                        <th class="min-w-[100px]" data-datatable-column="jangka_waktu">
+                                            <span class="sort"> <span class="sort-label"> Periode </span>
+                                                <span class="sort-icon"> </span> </span>
+                                        </th>
+                                    </tr>
+                                </thead>
+                            </table>
+                        </div>
+                        <div
+                            class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                            <div class="flex items-center gap-2">
+                                Show
+                                <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select>
+                                per
+                                page
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <span data-datatable-info="true"> </span>
+                                <div class="pagination" data-datatable-pagination="true">
                                 </div>
                             </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-                            <!-- Kotak 2 -->
-                            <div class="col-md-2 mb-4">
-                                <div class="card shadow-sm">
-                                    <div class="card-body">
-                                        <h5 class="card-title">Kotak 2</h5>
-                                        <span class="badge bg-danger position-absolute top-0 end-0 m-3">5</span>
-                                        <i class="bi bi-bell position-absolute top-0 end-0 m-3"></i>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Kotak 3 -->
-                            <div class="col-md-2 mb-4">
-                                <div class="card shadow-sm">
-                                    <div class="card-body">
-                                        <h5 class="card-title">Kotak 3</h5>
-                                        <span class="badge bg-danger position-absolute top-0 end-0 m-3">8</span>
-                                        <i class="bi bi-bell position-absolute top-0 end-0 m-3"></i>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Kotak 4 -->
-                            <div class="col-md-2 mb-4">
-                                <div class="card shadow-sm">
-                                    <div class="card-body">
-                                        <h5 class="card-title">Kotak 4</h5>
-                                        <span class="badge bg-danger position-absolute top-0 end-0 m-3">2</span>
-                                        <i class="bi bi-bell position-absolute top-0 end-0 m-3"></i>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Kotak 5 -->
-                            <div class="col-md-2 mb-4">
-                                <div class="card shadow-sm">
-                                    <div class="card-body">
-                                        <h5 class="card-title">Kotak 5</h5>
-                                        <span class="badge bg-danger position-absolute top-0 end-0 m-3">3</span>
-                                        <i class="bi bi-bell position-absolute top-0 end-0 m-3"></i>
-                                    </div>
-                                </div>
+            {{--  Audit Rail  --}}
+            <div class="grid my-5 gap-5 lg:gap-7.5">
+                <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false"
+                    data-datatable-page-size="5" data-datatable-state-save="false" id="audit-table"
+                    data-api-url="{{ route('auditrail.datatables') }}">
+                    <div class="card-header bg-agi-50 py-5 flex-wrap">
+                        <h3 class="card-title">
+                            Audit Trail
+                        </h3>
+                    </div>
+                    <div class="scrollable-x-auto">
+                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
+                            data-datatable-table="true">
+                            <thead>
+                                <tr>
+                                    <th class="min-w-[100px]" data-datatable-column="nik">
+                                        <span class="sort"> <span class="sort-label"> NIK </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="name">
+                                        <span class="sort"> <span class="sort-label"> Name </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="action_type">
+                                        <span class="sort"> <span class="sort-label"> Action Type </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="action_description">
+                                        <span class="sort"> <span class="sort-label"> Action Description</span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="target_table">
+                                        <span class="sort"> <span class="sort-label"> Target Table </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="target_record_id">
+                                        <span class="sort"> <span class="sort-label"> Target Record Id </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                </tr>
+                            </thead>
+                        </table>
+                    </div>
+                    <div
+                        class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                        <div class="flex items-center gap-2">
+                            Show
+                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select>
+                            per
+                            page
+                        </div>
+                        <div class="flex items-center gap-4">
+                            <span data-datatable-info="true"> </span>
+                            <div class="pagination" data-datatable-pagination="true">
                             </div>
                         </div>
                     </div>
@@ -71,3 +171,142 @@
         </div>
     </div>
 @endsection
+
+@push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        const formCounts = @json($formCounts);
+
+        const labels = formCounts.map(form => form.nama_form);
+        const data = formCounts.map(form => form.total);
+        const ctx = document.getElementById('dashboardChart').getContext('2d');
+
+        new Chart(ctx, {
+            type: 'pie', // tipe chart
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: data,
+                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
+                }]
+            },
+            options: {
+                responsive: true,
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'right',
+                    },
+                    title: {
+                        display: true,
+                        text: labels.length === 1 && labels[0] === 'Tidak ada data' ?
+                            'Tidak ada data yang ditemukan' : 'Distribusi Jenis Pengajuan',
+                        font: {
+                            size: 16
+                        }
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                const label = context.label || '';
+                                const value = context.raw || 0;
+                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                const percentage = Math.round((value / total) * 100);
+                                return `${label}: ${value} (${percentage}%)`;
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+
+    <script type="module">
+        document.addEventListener('DOMContentLoaded', function() {
+            const elementReport = document.querySelector('#dashboardreport-table');
+            const apiUrlReport = elementReport.getAttribute('data-api-url');
+
+            // Inisialisasi DataTable Report
+            const dataTableReportOptions = {
+                apiEndpoint: apiUrlReport,
+                pageSize: 5,
+                columns: {
+                    nik: {
+                        title: 'nik',
+                    },
+                    name: {
+                        title: 'name',
+                        render: (item, data) => data?.user?.name || 'Unknown',
+                    },
+                    unit: {
+                        title: 'unit',
+                        render: (item, data) => data?.user?.roles?.map(role => role.name).join(', ') ||
+                            'No Role',
+                    },
+                    jenis_form: {
+                        title: 'Jenis Pengajuan',
+                        render: (item, data) => data?.jenis_form?.nama_form || 'No Form',
+                    },
+                    jangka_waktu: {
+                        title: 'Jangka Waktu',
+                        render: (item, data) => {
+                            const months = [
+                                'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+                                'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+                            ];
+
+                            const formatDate = (dateString) => {
+                                const date = new Date(dateString);
+                                const day = String(date.getDate()).padStart(2, '0');
+                                const month = months[date.getMonth()];
+                                const year = date.getFullYear();
+                                return `${day} ${month} ${year}`;
+                            };
+
+                            if (data?.jangka_waktu?.rentang === 'Sementara') {
+                                const tanggalMulai = formatDate(data?.jangka_waktu?.tanggal_mulai);
+                                const tanggalSelesai = formatDate(data?.jangka_waktu?.tanggal_selesai);
+                                return `${data?.jangka_waktu?.rentang} (${tanggalMulai} - ${tanggalSelesai})`;
+                            } else {
+                                return data?.jangka_waktu?.rentang;
+                            }
+                        }
+                    },
+                },
+            };
+            const datatableReport = new KTDataTable(elementReport, dataTableReportOptions);
+
+            const elementAudit = document.querySelector('#audit-table');
+            const apiUrlAudit = elementAudit.getAttribute('data-api-url');
+
+            // Inisialisasi DataTable
+            const dataTableAuditOptions = {
+                apiEndpoint: apiUrlAudit,
+                pageSize: 5,
+                columns: {
+                    nik: {
+                        title: 'nik',
+                        render: (item, data) => data?.user?.nik || 'Unknown',
+                    },
+                    name: {
+                        title: 'name',
+                        render: (item, data) => data?.user?.name || 'Unknown',
+                    },
+                    action_type: {
+                        title: 'action_type',
+                    },
+                    action_description: {
+                        title: 'action_description',
+                    },
+                    target_table: {
+                        title: 'target_table',
+                    },
+                    target_record_id: {
+                        title: 'target_record_id',
+                    },
+                },
+            };
+            const datatableAudit = new KTDataTable(elementAudit, dataTableAuditOptions);
+        });
+    </script>
+@endpush

routes/web.php

@@ -1,9 +1,16 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
-    Route::middleware(['auth'])->group(function () {
-        Route::get('/', function () {
-            return view('welcome');
-        })->name('dashboard');
+use App\Http\Controllers\DashboardController;
 
-    });
+Route::middleware(['auth'])->group(function () {
+    Route::get('/', [DashboardController::class, 'index'])->name('dashboard');
+});
+
+// use Illuminate\Support\Facades\Route;
+//     Route::middleware(['auth'])->group(function () {
+//         Route::get('/', function () {
+//             return view('welcome');
+//         })->name('dashboard');
+
+//     });