From e24c1c3195464b0adbbb0c30a4a23767eaea5cb8 Mon Sep 17 00:00:00 2001
From: Zhaqian Rouf Alfauzi <zhaqianroufa@gmail.com>
Date: Sat, 8 Feb 2025 15:40:04 +0700
Subject: [PATCH] [update] Responsive Data Table

---
 .../views/pages/admin/data-santri.blade.php   |  77 +++----
 .../views/pages/santri/counting.blade.php     | 188 +++++++++---------
 .../views/pages/santri/history.blade.php      | 111 ++++++-----
 3 files changed, 198 insertions(+), 178 deletions(-)

diff --git a/resources/views/pages/admin/data-santri.blade.php b/resources/views/pages/admin/data-santri.blade.php
index e2e483b..1b77dd7 100644
--- a/resources/views/pages/admin/data-santri.blade.php
+++ b/resources/views/pages/admin/data-santri.blade.php
@@ -29,50 +29,56 @@
                             <h5 class="card-title">Munaqosah Santri</h5>
 
                             <!-- Tabel Riwayat -->
-                        <!-- Tabel Riwayat -->
-                        <table id="dataTable" class="table">
-                            <thead>
-                                <tr>
-                                    <th>Nama Santri</th>
-                                    <th>Tanggal</th>
-                                    <th>Tahun Angkatan</th>
-                                    <th>Al-Qur'an Isi</th>
-                                    <th>Al-Hadis Isi</th>
-                                    <th>Nilai N</th>
-                                    <th>Status</th>
-                                    <th>Aksi</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @foreach($riwayat as $item)
-                                <tr>
-                                    <!-- Asumsikan Anda punya relasi ke Tabel User untuk nama, jenkel, asal -->
-                                    <td>{{ $item->user->name ?? '—' }}</td>
-                                    <td>{{ $item->created_at->format('Y-m-d') }}</td>
-                                    <td>{{ $item->tahun_angkatan }}</td>
-                                    <td>{{ $item->alquran }}</td>
-                                    <td>{{ $item->alhadis }}</td>
-                                    <td>{{ number_format($item->nilai_n, 2) }}</td>
-                                    <td>{{ $item->status }}</td>
-                                    <td>
-                                        <!-- misal admin bisa verifikasi, dsb. -->
-                                        <a href="#" class="btn btn-success btn-sm">
-                                            <i class='bx bxs-check-circle'></i> Verifikasi
-                                        </a>
-                                    </td>
-                                </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
+                            <table id="dataTable" class="table">
+                                <thead>
+                                    <tr>
+                                        <th>Nama Santri</th>
+                                        <th>Tanggal</th>
+                                        <th>Tahun Angkatan</th>
+                                        <th>Al-Qur'an Isi</th>
+                                        <th>Al-Hadis Isi</th>
+                                        <th>Nilai N</th>
+                                        <th>Status</th>
+                                        <th>Aksi</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @foreach($riwayat as $item)
+                                    <tr>
+                                        <td>{{ $item->user->name ?? '—' }}</td>
+                                        <td>{{ $item->created_at->format('Y-m-d') }}</td>
+                                        <td>{{ $item->tahun_angkatan }}</td>
+                                        <td>{{ $item->alquran }}</td>
+                                        <td>{{ $item->alhadis }}</td>
+                                        <td>{{ number_format($item->nilai_n, 2) }}</td>
+                                        <td>{{ $item->status }}</td>
+                                        <td>
+                                            <a href="#" class="btn btn-success btn-sm">
+                                                <i class='bx bxs-check-circle'></i> Verifikasi
+                                            </a>
+                                        </td>
+                                    </tr>
+                                    @endforeach
+                                </tbody>
+                            </table>
 
                             <!-- DataTables CSS & JS -->
                             <link rel="stylesheet"
                                 href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
+                            <!-- Tambahkan CSS Responsive -->
+                            <link rel="stylesheet"
+                                href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
+
                             <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                             <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+                            <!-- Tambahkan JS Responsive -->
+                            <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
+                            </script>
+
                             <script>
                                 $(document).ready(function () {
                                     $('#dataTable').DataTable({
+                                        responsive: true, // Aktifkan fitur responsif
                                         "language": {
                                             "search": "Cari:",
                                             "lengthMenu": "Tampilkan _MENU_ data",
@@ -90,5 +96,6 @@
                 </div>
             </div>
         </div>
+    </div>
 </main>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/santri/counting.blade.php b/resources/views/pages/santri/counting.blade.php
index 0a9cb19..fd48611 100644
--- a/resources/views/pages/santri/counting.blade.php
+++ b/resources/views/pages/santri/counting.blade.php
@@ -63,107 +63,109 @@
                 @if($latest)
                 <div class="card-footer text-center p-4">
                     <h5 class="mb-3 fw-bold">Hasil Terakhir</h5>
-                    <table class="table table-bordered text-start">
-                        <tr>
-                            <th><i class="bx bx-calendar"></i> Tanggal</th>
-                            <td>{{ $latest->created_at->format('Y-m-d H:i') }}</td>
-                        </tr>
-                        <tr>
-                            <th><i class="bx bx-user"></i> Tahun Angkatan</th>
-                            <td>{{ $latest->tahun_angkatan }}</td>
-                        </tr>
-                        <tr>
-                            <th><i class="bx bx-book"></i> Jumlah Al-Qur'an Isi</th>
-                            <td>{{ $latest->alquran }}</td>
-                        </tr>
-                        <tr>
-                            <th><i class="bx bx-book-open"></i> Jumlah Al-Hadis Isi</th>
-                            <td>{{ $latest->alhadis }}</td>
-                        </tr>
-                        <tr>
-                            <th><i class="bx bx-line-chart"></i> Nilai (n)</th>
-                            <td>
-                                <strong>
-                                    {{-- Tampilkan 2 desimal + simbol persen --}}
-                                    {{ number_format($latest->nilai_n, 2) }}%
-                                </strong>
-                            </td>
-                        </tr>
-                        <tr>
-                            <th><i class='bx bx-calculator'></i> Hasil</th>
-                            <td>
-                                <span class="badge
-                                        {{ $latest->status === 'Tercapai' ? 'bg-success' : 'bg-danger' }}">
-                                    {{ $latest->status }}
-                                </span>
-                            </td>
-                        </tr>
+                    <!-- Membuat tabel responsif -->
+                    <div class="table-responsive">
+                        <table class="table table-bordered text-start">
+                            <tr>
+                                <th><i class="bx bx-calendar"></i> Tanggal</th>
+                                <td>{{ $latest->created_at->format('Y-m-d H:i') }}</td>
+                            </tr>
+                            <tr>
+                                <th><i class="bx bx-user"></i> Tahun Angkatan</th>
+                                <td>{{ $latest->tahun_angkatan }}</td>
+                            </tr>
+                            <tr>
+                                <th><i class="bx bx-book"></i> Jumlah Al-Qur'an Isi</th>
+                                <td>{{ $latest->alquran }}</td>
+                            </tr>
+                            <tr>
+                                <th><i class="bx bx-book-open"></i> Jumlah Al-Hadis Isi</th>
+                                <td>{{ $latest->alhadis }}</td>
+                            </tr>
+                            <tr>
+                                <th><i class="bx bx-line-chart"></i> Nilai (n)</th>
+                                <td>
+                                    <strong>
+                                        {{-- Tampilkan 2 desimal + simbol persen --}}
+                                        {{ number_format($latest->nilai_n, 2) }}%
+                                    </strong>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th><i class='bx bx-calculator'></i> Hasil</th>
+                                <td>
+                                    <span class="badge
+                                            {{ $latest->status === 'Tercapai' ? 'bg-success' : 'bg-danger' }}">
+                                        {{ $latest->status }}
+                                    </span>
+                                </td>
+                            </tr>
 
-                        {{-- Tambahan kolom baru untuk keterangan detail --}}
-                        @php
-                            $start = \Carbon\Carbon::create($latest->tahun_angkatan, 1, 1);
-                            $now   = \Carbon\Carbon::today();
-                            $x     = $start->diffInDays($now);
-                            $y     = $latest->alquran + $latest->alhadis;
-                            $targetSpeed = 2603 / 1095;
+                            {{-- Tambahan kolom baru untuk keterangan detail --}}
+                            @php
+                                $start = \Carbon\Carbon::create($latest->tahun_angkatan, 1, 1);
+                                $now   = \Carbon\Carbon::today();
+                                $x     = $start->diffInDays($now);
+                                $y     = $latest->alquran + $latest->alhadis;
+                                $targetSpeed = 2603 / 1095;
 
-                            // nCheck = 0 sebagai default
-                            $nCheck = 0;
+                                // nCheck = 0 sebagai default
+                                $nCheck = 0;
 
-                            if ($y >= 2603) {
-                                // Sudah pasti 'Sesuai Target'
-                                $nCheck = 100;
-                            } elseif ($x > 0) {
-                                $userSpeed = $y / $x;
-                                $nCheck    = ($userSpeed / $targetSpeed) * 100;
-                            }
+                                if ($y >= 2603) {
+                                    // Sudah pasti 'Sesuai Target'
+                                    $nCheck = 100;
+                                } elseif ($x > 0) {
+                                    $userSpeed = $y / $x;
+                                    $nCheck    = ($userSpeed / $targetSpeed) * 100;
+                                }
 
-                            // Tentukan status detail
-                            $detailStatus = '';
-                            $badgeClass   = '';
+                                // Tentukan status detail
+                                $detailStatus = '';
+                                $badgeClass   = '';
 
-                            // 1) Kalau y >= 2603: Sudah penuh => "Sesuai Target"
-                            if ($y >= 2603) {
-                                $detailStatus = "Sesuai Target (Halaman penuh)";
-                                $badgeClass   = 'bg-success';
-                            }
-                            // 2) Kalau x=0 dan y<2603
-                            elseif ($x == 0) {
-                                $detailStatus = "Data belum berjalan (x=0)";
-                                $badgeClass   = 'bg-secondary';
-                            }
-                            else {
-                                // 3) Kalau x>0, cek nCheck
-                                if ($nCheck < 100) {
-                                    // Hitung kekurangan
-                                    $shortPages = ($x * $targetSpeed) - $y;
-                                    $shortPages = ceil($shortPages); 
-                                    $detailStatus = "Belum Target, kurang isi {$shortPages} halaman";
-                                    $badgeClass   = 'bg-danger';
-                                } elseif (abs($nCheck - 100) < 0.00001) {
-                                    // pas 100%
-                                    $detailStatus = "Sesuai Target (100%)";
+                                // 1) Kalau y >= 2603: Sudah penuh => "Sesuai Target"
+                                if ($y >= 2603) {
+                                    $detailStatus = "Sesuai Target (Halaman penuh)";
                                     $badgeClass   = 'bg-success';
-                                } elseif ($nCheck > 100) {
-                                    $detailStatus = "Lebih Target";
-                                    $badgeClass   = 'bg-primary';
-                                } else {
-                                    $detailStatus = "Data tidak valid";
+                                }
+                                // 2) Kalau x=0 dan y<2603
+                                elseif ($x == 0) {
+                                    $detailStatus = "Data belum berjalan (x=0)";
                                     $badgeClass   = 'bg-secondary';
                                 }
-                            }
-                        @endphp
+                                else {
+                                    // 3) Kalau x>0, cek nCheck
+                                    if ($nCheck < 100) {
+                                        // Hitung kekurangan
+                                        $shortPages = ($x * $targetSpeed) - $y;
+                                        $shortPages = ceil($shortPages); 
+                                        $detailStatus = "Belum Target, kurang isi {$shortPages} halaman";
+                                        $badgeClass   = 'bg-danger';
+                                    } elseif (abs($nCheck - 100) < 0.00001) {
+                                        // pas 100%
+                                        $detailStatus = "Sesuai Target (100%)";
+                                        $badgeClass   = 'bg-success';
+                                    } elseif ($nCheck > 100) {
+                                        $detailStatus = "Lebih Target";
+                                        $badgeClass   = 'bg-primary';
+                                    } else {
+                                        $detailStatus = "Data tidak valid";
+                                        $badgeClass   = 'bg-secondary';
+                                    }
+                                }
+                            @endphp
 
-                        <tr>
-                            <th><i class="bx bx-info-circle"></i> Status Detail</th>
-                            <td>
-                                <span class="badge {{ $badgeClass }}">
-                                    {{ $detailStatus }}
-                                </span>
-                            </td>
-                        </tr>
-
-                    </table>
+                            <tr>
+                                <th><i class="bx bx-info-circle"></i> Status Detail</th>
+                                <td>
+                                    <span class="badge {{ $badgeClass }}">
+                                        {{ $detailStatus }}
+                                    </span>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
                 </div>
 
                 {{-- Debug (opsional) --}}
@@ -184,4 +186,4 @@
         </div>
     </div>
 </main>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/pages/santri/history.blade.php b/resources/views/pages/santri/history.blade.php
index b3e376c..3f43dae 100644
--- a/resources/views/pages/santri/history.blade.php
+++ b/resources/views/pages/santri/history.blade.php
@@ -28,64 +28,75 @@
                         <div class="card-body">
                             <h5 class="card-title">Riwayat Hitung</h5>
 
-                            <!-- Tabel Riwayat -->
-                            <table id="riwayatTable" class="table">
-                                <thead>
-                                    <tr>
-                                        <th>Tanggal</th>
-                                        <th>Tahun Angkatan</th>
-                                        <th>Al-Qur'an Isi</th>
-                                        <th>Al-Hadis Isi</th>
-                                        <th>Nilai N</th>
-                                        <th>Status</th>
-                                        <!-- Kolom Aksi -->
-                                        <th>Aksi</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @foreach($riwayat as $item)
-                                    <tr>
-                                        <td>{{ $item->created_at->format('Y-m-d') }}</td>
-                                        <td>{{ $item->tahun_angkatan }}</td>
-                                        <td>{{ $item->alquran }}</td>
-                                        <td>{{ $item->alhadis }}</td>
-                                        <td>{{ number_format($item->nilai_n, 2) }}</td>
-                                        <td>
-                                            @if($item->status === 'Tercapai')
-                                            <span class="badge bg-success">{{ $item->status }}</span>
-                                            @else
-                                            <span class="badge bg-danger">{{ $item->status }}</span>
-                                            @endif
-                                        </td>
-                                        <!-- Kolom Aksi -->
-                                        <td>
-                                            <!-- Tombol Hapus -->
-                                            <form action="{{ route('riwayat.destroy', $item->id) }}" method="POST" style="display:inline;">
-                                                @csrf
-                                                @method('DELETE')
-                                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data ini?')">
-                                                    <i class='bx bxs-trash'></i> Hapus
-                                                </button>
-                                            </form>
-                                        
-                                            <!-- Tombol Kirim -->
-                                            <a href="{{ route('riwayat.send', $item->id) }}" class="btn btn-primary btn-sm">
-                                                <i class='bx bxs-send'></i> Kirim
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    @endforeach
-                                </tbody>
-                            </table>
+                            <!-- Membungkus tabel dengan div.table-responsive -->
+                            <div class="table-responsive">
+                                <table id="riwayatTable" class="table">
+                                    <thead>
+                                        <tr>
+                                            <th>Tanggal</th>
+                                            <th>Tahun Angkatan</th>
+                                            <th>Al-Qur'an Isi</th>
+                                            <th>Al-Hadis Isi</th>
+                                            <th>Nilai N</th>
+                                            <th>Status</th>
+                                            <!-- Kolom Aksi -->
+                                            <th>Aksi</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        @foreach($riwayat as $item)
+                                        <tr>
+                                            <td>{{ $item->created_at->format('Y-m-d') }}</td>
+                                            <td>{{ $item->tahun_angkatan }}</td>
+                                            <td>{{ $item->alquran }}</td>
+                                            <td>{{ $item->alhadis }}</td>
+                                            <td>{{ number_format($item->nilai_n, 2) }}</td>
+                                            <td>
+                                                @if($item->status === 'Tercapai')
+                                                <span class="badge bg-success">{{ $item->status }}</span>
+                                                @else
+                                                <span class="badge bg-danger">{{ $item->status }}</span>
+                                                @endif
+                                            </td>
+                                            <!-- Kolom Aksi -->
+                                            <td>
+                                                <!-- Tombol Hapus -->
+                                                <form action="{{ route('riwayat.destroy', $item->id) }}" method="POST"
+                                                    style="display:inline;">
+                                                    @csrf
+                                                    @method('DELETE')
+                                                    <button type="submit" class="btn btn-danger btn-sm"
+                                                        onclick="return confirm('Yakin ingin menghapus data ini?')">
+                                                        <i class='bx bxs-trash'></i> Hapus
+                                                    </button>
+                                                </form>
 
-                            <!-- DataTables CSS & JS -->
+                                                <!-- Tombol Kirim -->
+                                                <a href="{{ route('riwayat.send', $item->id) }}"
+                                                    class="btn btn-primary btn-sm">
+                                                    <i class='bx bxs-send'></i> Kirim
+                                                </a>
+                                            </td>
+                                        </tr>
+                                        @endforeach
+                                    </tbody>
+                                </table>
+                            </div>
+                            <!-- End of .table-responsive -->
+
+                            <!-- DataTables CSS & JS beserta extension Responsive -->
                             <link rel="stylesheet"
                                 href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
+                            <link rel="stylesheet"
+                                href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
                             <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                             <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+                            <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
+                            </script>
                             <script>
                                 $(document).ready(function () {
                                     $('#riwayatTable').DataTable({
+                                        responsive: true,
                                         "language": {
                                             "search": "Cari:",
                                             "lengthMenu": "Tampilkan _MENU_ data",