WIP: dashboard

app/Http/Controllers/DashboardController.php

@@ -2,10 +2,90 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\BookingModel;
+use App\Models\LogKecemasanModel;
+use App\Models\TestSessionsModel;
 use Illuminate\Http\Request;
 
 class DashboardController extends Controller
 {
+    public function getDataForDashboardTable()
+    {
+        $data_booking = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->get();
+        $result = [];
+        foreach ($data_booking as $booking) {
+            $status_session = '0';
+            $data_sessions = TestSessionsModel::where('id_booking', $booking->id_booking)->first();
+            if($data_sessions != null) {
+                $status_session = $data_sessions->status_session;
+            }
+
+            $result[] = [
+                'nama_lengkap' => $booking->nama_lengkap,
+                'email' => $booking->email,
+                'no_telp' => $booking->no_telp,
+                'tanggal_booking' => $booking->created_at->format('Y-m-d'),
+                'status_session' => $status_session,
+                'status_tes' => $booking->status_tes,
+            ];
+        }
+        return response()->json([
+            'status' => true,
+            'data' => $result
+        ]);
+    }
+    public function getDataDashboard()
+    {
+        $data_booking_today = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->count();
+        $data_booking_yesterday = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d', strtotime('-1 day')) . '%')->count();
+        $data_booking_month = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m') . '%')->count();
+        $booking_diff = $data_booking_month - $data_booking_today;
+        $booking_percent = $data_booking_month > 0 ? ($booking_diff / $data_booking_month) * 100 : 0;
+
+        $data_tes_today = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->where('status_tes', '2')->count();
+        $data_tes_yesterday = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d', strtotime('-1 day')) . '%')->where('status_tes', '2')->count();
+        $data_tes_month = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m') . '%')->where('status_tes', '2')->count();
+        $tes_diff = $data_tes_month - $data_tes_today;
+        $tes_percent = $data_tes_month > 0 ? ($tes_diff / $data_tes_month) * 100 : 0;
+
+        $data_tes_berlangsung_today = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->where('status_tes', '1')->count();
+        $data_tes_berlangsung_yesterday = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m-d', strtotime('-1 day')) . '%')->where('status_tes', '1')->count();
+        $data_tes_berlangsung_month = BookingModel::where('created_at', 'LIKE', '%' . date('Y-m') . '%')->where('status_tes', '1')->count();
+        $tes_berlangsung_diff = $data_tes_berlangsung_month - $data_tes_berlangsung_today;
+        $tes_berlangsung_percent = $data_tes_berlangsung_month > 0 ? ($tes_berlangsung_diff / $data_tes_berlangsung_month) * 100 : 0;
+
+        $data_rata_rata_kecemasan_today = LogKecemasanModel::where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->avg('skor_kecemasan');
+        $data_rata_rata_kecemasan_yesterday = LogKecemasanModel::where('created_at', 'LIKE', '%' . date('Y-m-d', strtotime('-1 day')) . '%')->avg('skor_kecemasan');
+        $data_rata_rata_kecemasan_month = LogKecemasanModel::where('created_at', 'LIKE', '%' . date('Y-m') . '%')->avg('skor_kecemasan');
+        $rata_rata_kecemasan_diff = $data_rata_rata_kecemasan_month - $data_rata_rata_kecemasan_today;
+        $rata_rata_kecemasan_percent = $data_rata_rata_kecemasan_month > 0 ? ($rata_rata_kecemasan_diff / $data_rata_rata_kecemasan_month) * 100 : 0;
+
+        return response()->json([
+            'total_booking' => $data_booking_today,
+            'booking_percent' => number_format($booking_percent, 1),
+            'booking_diff' => $booking_diff,
+            'booking_trend' => $booking_diff >= 0 ? 'bertambah' : 'berkurang',
+            'from_month_booking_count' => $data_booking_month,
+
+            'total_tes' => $data_tes_today,
+            'tes_percent' => number_format($tes_percent, 1),
+            'tes_diff' => $tes_diff,
+            'tes_trend' => $tes_diff >= 0 ? 'bertambah' : 'berkurang',
+            'from_month_tes_count' => $data_tes_month,
+
+            'total_tes_berlangsung' => $data_tes_berlangsung_today,
+            'tes_berlangsung_percent' => number_format($tes_berlangsung_percent, 1),
+            'tes_berlangsung_diff' => $tes_berlangsung_diff,
+            'tes_berlangsung_trend' => $tes_berlangsung_diff >= 0 ? 'bertambah' : 'berkurang',
+            'from_month_tes_berlangsung_count' => $data_tes_berlangsung_month,
+
+            'rata_rata_kecemasan' => number_format($data_rata_rata_kecemasan_today, 1),
+            'rata_rata_kecemasan_percent' => number_format($rata_rata_kecemasan_percent, 1),
+            'rata_rata_kecemasan_diff' => number_format($rata_rata_kecemasan_diff, 1),
+            'rata_rata_kecemasan_trend' => $rata_rata_kecemasan_diff >= 0 ? 'bertambah' : 'berkurang',
+            'from_month_rata_rata_kecemasan' => number_format($data_rata_rata_kecemasan_month, 1),
+        ]);
+    }
     /**
      * Display a listing of the resource.
      */

app/Http/Controllers/FinishUjianController.php

@@ -5,6 +5,7 @@
 use App\Models\BookingModel;
 use App\Models\DataSoalModel;
 use App\Models\DetailTestModel;
+use App\Models\LogKecemasanModel;
 use App\Models\TestSessionsModel;
 use Illuminate\Http\Request;
 
@@ -192,6 +193,23 @@ public function index(Request $request)
                 'totalScore' => $totalScore
             ];
 
+            $log_kecemasan = LogKecemasanModel::where('id_test_sessions', $id_session)->first();
+            if($log_kecemasan == null) {
+                LogKecemasanModel::create([
+                    'id_booking' => $data_session->id_booking,
+                    'id_test_sessions' => $id_session,
+                    'start_timestamp' => $start,
+                    'end_timestamp' => $end,
+                    'difference_timestamp' => $end - $start,
+                    'screen_width' => $data_session->screen_w,
+                    'screen_height' => $data_session->screen_h,
+                    'answered_count' => $answered,
+                    'not_answered_count' => $soalTidakTerjawab,
+                    'total_question' => $question_count,
+                    'skor_kecemasan' => $totalScore
+                ]);
+            }
+
             $data_booking = BookingModel::where('id_booking', $data_session->id_booking)->first();
             if($data_session->status_session == '0') {
                 return redirect()->route('cek-status.index')->with('error', 'Data sesi tes dinonaktifkan. Silahkan cek status dengan kode untuk informasi lebih lanjut.');

app/Models/LogKecemasanModel.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class LogKecemasanModel extends Model
+{
+    protected $table = 'log_hasil_kecemasan';
+
+    protected $primaryKey = 'id_log_kecemasan';
+
+    protected $keyType = 'string';
+
+    public $incrementing = false;
+
+    protected $fillable = [
+        'id_log_kecemasan',
+        'id_booking',
+        'id_test_sessions',
+        'start_timestamp',
+        'end_timestamp',
+        'difference_timestamp',
+        'screen_width',
+        'screen_height',
+        'answered_count',
+        'not_answered_count',
+        'total_question',
+        'skor_kecemasan'
+    ];
+
+    protected $casts = [
+        'id_log_kecemasan' => 'string',
+        'id_booking' => 'string',
+        'id_test_sessions' => 'string',
+    ];
+
+    public static function boot()
+    {
+        parent::boot();
+        static::creating(function ($model) {
+            if (empty($model->id_log_kecemasan)) {
+                $model->id_log_kecemasan = (string) \Illuminate\Support\Str::uuid();
+            }
+        });
+    }
+}

database/migrations/2026_05_23_165924_create_log_hasil_kecemasan_table.php

@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('log_hasil_kecemasan', function (Blueprint $table) {
+            $table->uuid('id_log_kecemasan')->primary();
+            $table->uuid('id_booking');
+            $table->uuid('id_test_sessions');
+            $table->char('start_timestamp', 20);
+            $table->char('end_timestamp', 20);
+            $table->char('difference_timestamp', 20);
+            $table->char('screen_width', 10);
+            $table->char('screen_height', 10);
+            $table->integer('answered_count');
+            $table->integer('not_answered_count');
+            $table->integer('total_question');
+            $table->integer('skor_kecemasan');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('log_hasil_kecemasan');
+    }
+};

resources/views/admin/layouts/sidebar.blade.php

@@ -1,9 +1,9 @@
 <nav class="pc-sidebar">
   <div class="navbar-wrapper">
     <div class="m-header">
-      <a href="{{ route('dashboard.index') }}" class="b-brand text-primary">
+      <a href="{{ route('dashboard.index') }}" class="b-brand text-primary fs-3 fw-bold text-dark">
         <!-- ========   Change your logo from here   ============ -->
-        <img src="{{ asset('assets/admin/assets/images/logo-dark.svg') }}" class="img-fluid logo-lg" alt="logo" id="logo-admin">
+        {{ env('APP_NAME') }}
       </a>
     </div>
     <div class="navbar-content">

resources/views/admin/pages/dashboard/index.blade.php

@@ -24,10 +24,15 @@
     <div class="col-md-6 col-xl-3">
       <div class="card">
         <div class="card-body">
-          <h6 class="mb-2 f-w-400 text-muted">Total Page Views</h6>
+          <h6 class="mb-2 f-w-400 text-muted">Total Booking hari ini</h6>
-          <h4 class="mb-3">4,42,236 <span class="badge bg-light-primary border border-primary"><i
+          <h4 class="mb-3">
-                class="ti ti-trending-up"></i> 59.3%</span></h4>
+            <span id="total_booking"></span>
-          <p class="mb-0 text-muted text-sm">You made an extra <span class="text-primary">35,000</span> this year
+            <span class="badge bg-light-primary border border-primary">
+              <i class="ti" id="trending-icon-booking"></i>
+              <span id="booking_percent">%</span>
+            </span>
+          </h4>
+          <p class="mb-0 text-muted text-sm">Booking <span id="booking_trend">bertambah</span> <span class="text-primary" id="from_month_booking_count"></span> dari bulan lalu
           </p>
         </div>
       </div>
@@ -35,271 +40,146 @@ class="ti ti-trending-up"></i> 59.3%</span></h4>
     <div class="col-md-6 col-xl-3">
       <div class="card">
         <div class="card-body">
-          <h6 class="mb-2 f-w-400 text-muted">Total Users</h6>
+          <h6 class="mb-2 f-w-400 text-muted">Total tes selesai hari ini</h6>
-          <h4 class="mb-3">78,250 <span class="badge bg-light-success border border-success"><i
+          <h4 class="mb-3">
-                class="ti ti-trending-up"></i> 70.5%</span></h4>
+            <span id="total_tes"></span>
-          <p class="mb-0 text-muted text-sm">You made an extra <span class="text-success">8,900</span> this year</p>
+            <span class="badge bg-light-primary border border-primary">
+              <i class="ti" id="trending-icon-tes"></i>
+              <span id="tes_percent">%</span>
+            </span>
+          </h4>
+          <p class="mb-0 text-muted text-sm">Tes <span id="tes_trend">bertambah</span> <span class="text-primary" id="from_month_tes_count"></span> dari bulan lalu
+          </p>
         </div>
       </div>
     </div>
     <div class="col-md-6 col-xl-3">
       <div class="card">
         <div class="card-body">
-          <h6 class="mb-2 f-w-400 text-muted">Total Order</h6>
+          <h6 class="mb-2 f-w-400 text-muted">Total tes masih berlangsung hari ini</h6>
-          <h4 class="mb-3">18,800 <span class="badge bg-light-warning border border-warning"><i
+          <h4 class="mb-3">
-                class="ti ti-trending-down"></i> 27.4%</span></h4>
+            <span id="total_tes_berlangsung"></span>
-          <p class="mb-0 text-muted text-sm">You made an extra <span class="text-warning">1,943</span> this year</p>
+            <span class="badge bg-light-primary border border-primary">
+              <i class="ti" id="trending-icon-tes-berlangsung"></i>
+              <span id="tes_berlangsung_percent">%</span>
+            </span>
+          </h4>
+          <p class="mb-0 text-muted text-sm">Tes yang sedang berlangsung <span id="tes_berlangsung_trend">bertambah</span> <span class="text-primary" id="from_month_tes_berlangsung_count"></span> dari bulan lalu
+          </p>
         </div>
       </div>
     </div>
     <div class="col-md-6 col-xl-3">
       <div class="card">
         <div class="card-body">
-          <h6 class="mb-2 f-w-400 text-muted">Total Sales</h6>
+          <h6 class="mb-2 f-w-400 text-muted">Rata rata skor kecemasan hari ini</h6>
-          <h4 class="mb-3">$35,078 <span class="badge bg-light-danger border border-danger"><i
+          <h4 class="mb-3">
-                class="ti ti-trending-down"></i> 27.4%</span></h4>
+            <span id="rata_rata_kecemasan"></span>
-          <p class="mb-0 text-muted text-sm">You made an extra <span class="text-danger">$20,395</span> this year
+            <span class="badge bg-light-primary border border-primary">
+              <i class="ti" id="trending-icon-rata-rata"></i>
+              <span id="rata_rata_kecemasan_percent">%</span>
+            </span>
+          </h4>
+          <p class="mb-0 text-muted text-sm">Rata rata skor kecemasan <span id="rata_rata_kecemasan_trend">bertambah</span> <span class="text-primary" id="from_month_rata_rata_kecemasan_count"></span> dari bulan lalu
           </p>
         </div>
       </div>
     </div>
 
     <div class="col-md-12 col-xl-8">
-      <div class="d-flex align-items-center justify-content-between mb-3">
+      <h5 class="mb-3">Tabel Monitoring Tes</h5>
-        <h5 class="mb-0">Unique Visitor</h5>
+      <table id="table-data-booking" class="table table-bordered">
-        <ul class="nav nav-pills justify-content-end mb-0" id="chart-tab-tab" role="tablist">
+        <thead>
-          <li class="nav-item" role="presentation">
+          <tr>
-            <button class="nav-link" id="chart-tab-home-tab" data-bs-toggle="pill" data-bs-target="#chart-tab-home"
+            <th>No</th>
-              type="button" role="tab" aria-controls="chart-tab-home" aria-selected="true">Month</button>
+            <th>Nama</th>
-          </li>
+            <th>Email</th>
-          <li class="nav-item" role="presentation">
+            <th>Telepon</th>
-            <button class="nav-link active" id="chart-tab-profile-tab" data-bs-toggle="pill"
+            <th>Tanggal Booking</th>
-              data-bs-target="#chart-tab-profile" type="button" role="tab" aria-controls="chart-tab-profile"
+            <th>Status Tes</th>
-              aria-selected="false">Week</button>
+            <th>Status Sesi</th>
-          </li>
+          </tr>
-        </ul>
+        </thead>
-      </div>
+      </table>
-      <div class="card">
-        <div class="card-body">
-          <div class="tab-content" id="chart-tab-tabContent">
-            <div class="tab-pane" id="chart-tab-home" role="tabpanel" aria-labelledby="chart-tab-home-tab"
-              tabindex="0">
-              <div id="visitor-chart-1"></div>
-            </div>
-            <div class="tab-pane show active" id="chart-tab-profile" role="tabpanel"
-              aria-labelledby="chart-tab-profile-tab" tabindex="0">
-              <div id="visitor-chart"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-12 col-xl-4">
-      <h5 class="mb-3">Income Overview</h5>
-      <div class="card">
-        <div class="card-body">
-          <h6 class="mb-2 f-w-400 text-muted">This Week Statistics</h6>
-          <h3 class="mb-3">$7,650</h3>
-          <div id="income-overview-chart"></div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-md-12 col-xl-8">
-      <h5 class="mb-3">Recent Orders</h5>
-      <div class="card tbl-card">
-        <div class="card-body">
-          <div class="table-responsive">
-            <table class="table table-hover table-borderless mb-0">
-              <thead>
-                <tr>
-                  <th>TRACKING NO.</th>
-                  <th>PRODUCT NAME</th>
-                  <th>TOTAL ORDER</th>
-                  <th>STATUS</th>
-                  <th class="text-end">TOTAL AMOUNT</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Camera Lens</td>
-                  <td>40</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-danger f-10 m-r-5"></i>Rejected</span>
-                  </td>
-                  <td class="text-end">$40,570</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Laptop</td>
-                  <td>300</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-warning f-10 m-r-5"></i>Pending</span>
-                  </td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Mobile</td>
-                  <td>355</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-success f-10 m-r-5"></i>Approved</span></td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Camera Lens</td>
-                  <td>40</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-danger f-10 m-r-5"></i>Rejected</span>
-                  </td>
-                  <td class="text-end">$40,570</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Laptop</td>
-                  <td>300</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-warning f-10 m-r-5"></i>Pending</span>
-                  </td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Mobile</td>
-                  <td>355</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-success f-10 m-r-5"></i>Approved</span></td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Camera Lens</td>
-                  <td>40</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-danger f-10 m-r-5"></i>Rejected</span>
-                  </td>
-                  <td class="text-end">$40,570</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Laptop</td>
-                  <td>300</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-warning f-10 m-r-5"></i>Pending</span>
-                  </td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Mobile</td>
-                  <td>355</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-success f-10 m-r-5"></i>Approved</span></td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-                <tr>
-                  <td><a href="#" class="text-muted">84564564</a></td>
-                  <td>Mobile</td>
-                  <td>355</td>
-                  <td><span class="d-flex align-items-center gap-2"><i
-                        class="fas fa-circle text-success f-10 m-r-5"></i>Approved</span></td>
-                  <td class="text-end">$180,139</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-12 col-xl-4">
-      <h5 class="mb-3">Analytics Report</h5>
-      <div class="card">
-        <div class="list-group list-group-flush">
-          <a href="#"
-            class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">Company
-            Finance Growth<span class="h5 mb-0">+45.14%</span></a>
-          <a href="#"
-            class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">Company
-            Expenses Ratio<span class="h5 mb-0">0.58%</span></a>
-          <a href="#"
-            class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">Business
-            Risk Cases<span class="h5 mb-0">Low</span></a>
-        </div>
-        <div class="card-body px-2">
-          <div id="analytics-report-chart"></div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-md-12 col-xl-8">
-      <h5 class="mb-3">Sales Report</h5>
-      <div class="card">
-        <div class="card-body">
-          <h6 class="mb-2 f-w-400 text-muted">This Week Statistics</h6>
-          <h3 class="mb-0">$7,650</h3>
-          <div id="sales-report-chart"></div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-12 col-xl-4">
-      <h5 class="mb-3">Transaction History</h5>
-      <div class="card">
-        <div class="list-group list-group-flush">
-          <a href="#" class="list-group-item list-group-item-action">
-            <div class="d-flex">
-              <div class="flex-shrink-0">
-                <div class="avtar avtar-s rounded-circle text-success bg-light-success">
-                  <i class="ti ti-gift f-18"></i>
-                </div>
-              </div>
-              <div class="flex-grow-1 ms-3">
-                <h6 class="mb-1">Order #002434</h6>
-                <p class="mb-0 text-muted">Today, 2:00 AM</P>
-              </div>
-              <div class="flex-shrink-0 text-end">
-                <h6 class="mb-1">+ $1,430</h6>
-                <p class="mb-0 text-muted">78%</P>
-              </div>
-            </div>
-          </a>
-          <a href="#" class="list-group-item list-group-item-action">
-            <div class="d-flex">
-              <div class="flex-shrink-0">
-                <div class="avtar avtar-s rounded-circle text-primary bg-light-primary">
-                  <i class="ti ti-message-circle f-18"></i>
-                </div>
-              </div>
-              <div class="flex-grow-1 ms-3">
-                <h6 class="mb-1">Order #984947</h6>
-                <p class="mb-0 text-muted">5 August, 1:45 PM</P>
-              </div>
-              <div class="flex-shrink-0 text-end">
-                <h6 class="mb-1">- $302</h6>
-                <p class="mb-0 text-muted">8%</P>
-              </div>
-            </div>
-          </a>
-          <a href="#" class="list-group-item list-group-item-action">
-            <div class="d-flex">
-              <div class="flex-shrink-0">
-                <div class="avtar avtar-s rounded-circle text-danger bg-light-danger">
-                  <i class="ti ti-settings f-18"></i>
-                </div>
-              </div>
-              <div class="flex-grow-1 ms-3">
-                <h6 class="mb-1">Order #988784</h6>
-                <p class="mb-0 text-muted">7 hours ago</P>
-              </div>
-              <div class="flex-shrink-0 text-end">
-                <h6 class="mb-1">- $682</h6>
-                <p class="mb-0 text-muted">16%</P>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
     </div>
   </div>
 @endsection
+
+@section('script')
+<script>
+  let table = null;
+  $(document).ready(function() {
+    $.get('{{ route("dashboard.fetchData") }}', function(data) {
+      $('#total_booking').text(data.total_booking);
+      $('#booking_percent').text(data.booking_percent + '%');
+      $('#from_month_booking_count').text(data.from_month_booking_count);
+      $('#booking_trend').text(data.booking_trend);
+      if (data.booking_diff >= 0) {
+        $('#trending-icon-booking').addClass('ti-trending-up');
+        $('#booking_percent').addClass('text-primary');
+      } else {
+        $('#trending-icon-booking').addClass('ti-trending-down');
+        $('#booking_percent').addClass('text-danger');
+      }
+
+      $('#total_tes').text(data.total_tes);
+      $('#tes_percent').text(data.tes_percent + '%');
+      $('#from_month_tes_count').text(data.from_month_tes_count);
+      $('#tes_trend').text(data.tes_trend);
+      if (data.tes_diff >= 0) {
+        $('#trending-icon-tes').addClass('ti-trending-up');
+        $('#tes_percent').addClass('text-primary');
+      } else {
+        $('#trending-icon-tes').addClass('ti-trending-down');
+        $('#tes_percent').addClass('text-danger');
+      }
+
+      $('#total_tes_berlangsung').text(data.total_tes_berlangsung);
+      $('#tes_berlangsung_percent').text(data.tes_berlangsung_percent + '%');
+      $('#from_month_tes_berlangsung_count').text(data.from_month_tes_berlangsung_count);
+      $('#tes_berlangsung_trend').text(data.tes_berlangsung_trend);
+      if (data.tes_berlangsung_diff >= 0) {
+        $('#trending-icon-tes-berlangsung').addClass('ti-trending-up');
+        $('#tes_berlangsung_percent').addClass('text-primary');
+      } else {
+        $('#trending-icon-tes-berlangsung').addClass('ti-trending-down');
+        $('#tes_berlangsung_percent').addClass('text-danger');
+      }
+
+      $('#rata_rata_kecemasan').text(data.rata_rata_kecemasan);
+      $('#rata_rata_kecemasan_percent').text(data.rata_rata_kecemasan_percent + '%');
+      $('#from_month_rata_rata_kecemasan_count').text(data.from_month_rata_rata_kecemasan);
+      $('#rata_rata_kecemasan_trend').text(data.rata_rata_kecemasan_trend);
+      if (data.rata_rata_kecemasan_diff >= 0) {
+        $('#trending-icon-rata-rata').addClass('ti-trending-up');
+        $('#rata_rata_kecemasan_percent').addClass('text-primary');
+      } else {
+        $('#trending-icon-rata-rata').addClass('ti-trending-down');
+        $('#rata_rata_kecemasan_percent').addClass('text-danger');
+      }
+
+      table = new DataTable('#table-data-booking', {
+        searching: false,
+        paging: false,
+        ajax: {
+          url: '{{ route("dashboard.fetchDataTable") }}',
+        },
+        columns: [
+          {
+            data: null,
+            render: function(data, type, row, meta) {
+              return meta.row + 1;
+            }
+          },
+          { data: 'nama_lengkap' },
+          { data: 'email', name: 'email' },
+          { data: 'no_telp' },
+          { data: 'tanggal_booking' },
+          { data: 'status_tes' },
+          { data: 'status_session' },
+        ]
+      });
+    });
+  });
+</script>
+@endsection

routes/web.php

@@ -49,6 +49,8 @@
     Route::get('hasil-tes/get/all-not-answer', [FinishUjianController::class, 'getNotAnswered'])->name('hasil-tes.getNotAnswered');
 Route::middleware(['auth', 'role.auth'])->group(function() {
     Route::resource('dashboard', DashboardController::class);
+        Route::get('dashboard/fetch/data', [DashboardController::class, 'getDataDashboard'])->name('dashboard.fetchData');
+        Route::get('dashboard/fetch/data-table', [DashboardController::class, 'getDataForDashboardTable'])->name('dashboard.fetchDataTable');
     Route::resource('users', UsersController::class);
         Route::get('users/fetch/data', [UsersController::class, 'getData'])->name('users.fetchData');
     Route::resource('booking', BookingController::class)->except(['store']);