last update feat quick search

app/Http/Controllers/QuickSearchController.php

@@ -4,9 +4,10 @@ namespace App\Http\Controllers;
 
 use App\Enums\PbgTaskApplicationTypes;
 use App\Enums\PbgTaskStatus;
+use App\Http\Resources\TaskAssignmentsResource;
 use App\Models\PbgTask;
+use App\Models\TaskAssignment;
 use Illuminate\Http\Request;
-use function Illuminate\Log\log;
 
 class QuickSearchController extends Controller
 {
@@ -66,4 +67,21 @@ class QuickSearchController extends Controller
             return response()->view('pages.404', [], 500); // Optional: create `resources/views/errors/500.blade.php`
         }
     }
+
+    public function task_assignments(Request $request, $uuid){
+        try{
+            $query = TaskAssignment::query()
+            ->where('pbg_task_uid', $uuid)
+                ->orderBy('id', 'desc');
+
+            if ($request->filled('search')) {
+                $query->where('name', 'like', "%{$request->get('search')}%")
+                ->orWhere('email', 'like', "%{$request->get('search')}%");
+            }
+
+            return TaskAssignmentsResource::collection($query->paginate(config('app.paginate_per_page', 50)));
+        }catch(\Exception $exception){
+            return response()->json(['message' => $exception->getMessage()], 500);
+        }
+    }
 }

resources/js/quick-search/detail.js

@@ -0,0 +1,70 @@
+import { Grid } from "gridjs";
+class QuickSearchDetail {
+    init() {
+        this.initTablePbgTaskAssignments();
+    }
+
+    initTablePbgTaskAssignments() {
+        let tableContainer = document.getElementById(
+            "table-pbg-task-assignments"
+        );
+
+        let url_task_assignments = document.getElementById(
+            "url_task_assignments"
+        ).value;
+
+        new Grid({
+            columns: [
+                "ID",
+                "Nama",
+                "Email",
+                "Nomor Telepon",
+                "Keahlian",
+                "Status",
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+                debounceTimeout: 1000,
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${url_task_assignments}`,
+                then: (data) => {
+                    return data.data.map((item) => {
+                        const expertiseArray =
+                            typeof item.expertise === "string"
+                                ? JSON.parse(item.expertise)
+                                : item.expertise;
+
+                        return [
+                            item.id,
+                            item.name,
+                            item.email,
+                            item.phone_number,
+                            Array.isArray(expertiseArray)
+                                ? expertiseArray.map((e) => e.name).join(", ")
+                                : "-",
+                            item.status_name,
+                        ];
+                    });
+                },
+                total: (data) => data.meta.total,
+            },
+        }).render(tableContainer);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new QuickSearchDetail().init();
+});

resources/js/quick-search/result.js

@@ -4,13 +4,56 @@ class QuickSearchResult {
     constructor() {
         this.table = null;
         const baseInput = document.getElementById("base_url_datatable");
-        this.datatableUrl = baseInput ? baseInput.value : "";
+        this.baseUrl = baseInput ? baseInput.value.split("?")[0] : "";
+        this.keywordInput = document.getElementById("search_input");
+        this.searchButton = document.getElementById("search_button");
+
+        this.datatableUrl = this.buildUrl(this.keywordInput.value);
     }
 
     init() {
+        this.bindSearchButton();
         this.initDatatable();
     }
 
+    bindSearchButton() {
+        const handleSearch = () => {
+            const newKeyword = this.keywordInput.value.trim();
+            if (newKeyword !== "") {
+                // 1. Update datatable URL and reload
+                this.datatableUrl = this.buildUrl(newKeyword);
+                this.initDatatable();
+
+                // 2. Update URL query string (without reloading the page)
+                const newUrl = `${
+                    window.location.pathname
+                }?keyword=${encodeURIComponent(newKeyword)}`;
+                window.history.pushState({ path: newUrl }, "", newUrl);
+
+                // 3. Update visible keyword text in <em>{{ $keyword }}</em>>
+                const keywordDisplay = document.querySelector(".qs-header em");
+                if (keywordDisplay) {
+                    keywordDisplay.textContent = newKeyword;
+                }
+            }
+        };
+
+        this.searchButton.addEventListener("click", handleSearch);
+
+        this.keywordInput.addEventListener("keydown", (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                handleSearch();
+            }
+        });
+    }
+
+    buildUrl(keyword) {
+        const url = new URL(this.baseUrl, window.location.origin);
+        url.searchParams.set("search", keyword);
+        return url.toString();
+    }
+
     initDatatable() {
         const tableContainer = document.getElementById(
             "datatable-quick-search-result"
@@ -73,7 +116,12 @@ class QuickSearchResult {
         };
 
         if (this.table) {
-            this.table = this.table.updateConfig(config).forceRender();
+            this.table
+                .updateConfig({
+                    ...config,
+                    server: { ...config.server, url: this.datatableUrl },
+                })
+                .forceRender();
         } else {
             tableContainer.innerHTML = "";
             this.table = new Grid(config).render(tableContainer);

resources/scss/pages/quick-search/detail.scss

@@ -0,0 +1,73 @@
+.qs-detail-container {
+    color: #000; // black text
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+
+    .card {
+        background-color: #fff;
+
+        .card-header {
+            background-color: #f5f5f5;
+            font-weight: bold;
+            color: #000;
+        }
+
+        .card-body {
+            dt {
+                font-weight: 600;
+                color: #000;
+            }
+
+            dd {
+                margin-bottom: 10px;
+                color: #000;
+            }
+
+            .nav-tabs {
+                border-bottom: 1px solid #000;
+
+                .nav-link {
+                    color: #000;
+                    border: 1px solid transparent;
+                    border-top-left-radius: 0.25rem;
+                    border-top-right-radius: 0.25rem;
+                    font-weight: 500;
+
+                    &.active {
+                        background-color: #e0e0e0;
+                        border-color: #000 #000 #fff;
+                    }
+
+                    &:hover {
+                        color: #000;
+                    }
+                }
+            }
+
+            .tab-content {
+                padding: 1rem;
+            }
+
+            .mb-3 {
+                dt {
+                    font-weight: bold;
+                }
+
+                dd {
+                    margin-left: 0;
+                }
+            }
+
+            .border {
+                border-color: #000 !important;
+            }
+
+            .shadow-sm {
+                box-shadow: none !important;
+            }
+
+            .rounded {
+                border-radius: 4px !important;
+            }
+        }
+    }
+}

resources/scss/pages/quick-search/result.scss

@@ -1,11 +1,52 @@
 .qs-wrapper {
-    padding: 30px 15px;
+    width: 100%;
-    max-width: 1200px;
     margin: 0 auto;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     color: #2c3e50;
 }
 
+.qs-toolbar {
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 1.5rem;
+}
+
+.qs-search-form {
+    width: 100%;
+    .gsp-input {
+        width: 100%;
+        height: 44px;
+        font-size: 16px;
+        padding: 0 20px;
+        border-radius: 24px;
+        border: 1px solid #dfe1e5;
+        background-color: #fff;
+        box-shadow: none;
+        transition: box-shadow 0.2s ease-in-out, border-color 0.2s;
+
+        &:focus {
+            border-color: transparent;
+            box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
+            outline: none;
+        }
+    }
+
+    .gsp-btn {
+        height: 44px;
+        padding: 0 24px;
+        font-size: 16px;
+        border: none;
+        border-radius: 24px;
+        background-color: #1a73e8;
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.2s ease-in-out;
+
+        &:hover {
+            background-color: #1558d6;
+        }
+    }
+}
+
 .qs-header {
     margin-bottom: 30px;
     text-align: center;
@@ -30,7 +71,6 @@
 .qs-table-wrapper {
     background-color: #fff;
     border-radius: 10px;
-    padding: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     overflow-x: auto; // allow horizontal scroll on small screens
 }

resources/views/auth/signin.blade.php

@@ -21,8 +21,8 @@ class="authentication-bg"
                                     <img src="/images/dputr-kab-bandung.png" height="auto" width="100%" alt="logo light">
                                 </a>
                             </div>
-                            <h4 class="fw-bold text-dark mb-2">Welcome Back!</h4>
+                            <h4 class="fw-bold text-dark mb-2">Selamat Datang!</h4>
-                                <p class="text-muted">Sign in to your account to continue</p>
+                                <p class="text-muted">Masuk kedalam akun untuk melihat lebih lanjut</p>
                         </div>
                         <form method="POST" action="{{ route('login') }}" class="mt-4">
 
@@ -35,7 +35,7 @@ class="authentication-bg"
                             @endif
 
                             <div class="mb-3">
-                                <label for="email" class="form-label">Email Address</label>
+                                <label for="email" class="form-label">Email </label>
                                 <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email">
                             </div>
                             <div class="mb-3">
@@ -45,6 +45,11 @@ class="authentication-bg"
                             <div class="d-grid">
                                 <button class="btn btn-dark btn-lg fw-medium" type="submit">Sign In</button>
                             </div>
+                            <div class="d-flex justify-content-start mt-3">
+                                <a href="{{ route('search') }}" class="">
+                                    Pencarian cepat
+                                </a>
+                            </div>
                         </form>
                     </div>
                 </div>

resources/views/quick-search/detail.blade.php

@@ -1,14 +1,18 @@
 @extends('layouts.base', ['subtitle' => 'Quick Search'])
 
 @section('css')
+@vite(['resources/scss/pages/quick-search/detail.scss'])
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
 @endsection
 
 @section('content')
-<div class="row">
+<div class="container qs-detail-container pt-3">
+    <div class="row">
         <div class="col-12">
             <div class="card">
                 <div class="card-header d-flex justify-content-between align-items-center">
                 <h5 class="mb-0">Detail Informasi Permohonan PBG</h5>
+                <a href="javascript:history.back()" class="btn btn-primary">Back</a>
                 </div>
                 <div class="card-body">
                 <div class="row gy-3 gx-4">
@@ -21,7 +25,7 @@
                             <dd class="col-sm-7">{{ $data->owner_name }}</dd>
 
                             <dt class="col-sm-5">Jenis Permohonan</dt>
-              <dd class="col-sm-7">{{ $applicationTypes[$data->application_type] ?? '-' }}</dd>
+                            <dd class="col-sm-7">{{ isset($data->application_type) ? $applicationTypes[$data->application_type] : '-' }}</dd>
 
                             <dt class="col-sm-5">Kondisi</dt>
                             <dd class="col-sm-7">{{ $data->condition }}</dd>
@@ -33,10 +37,9 @@
                             <dd class="col-sm-7">{{ $data->document_number }}</dd>
 
                             <dt class="col-sm-5">Status</dt>
-              <dd class="col-sm-7">{{ $statusOptions[$data->status] ?? '-' }}</dd>
+                            <dd class="col-sm-7">{{ isset($data->status) ? $statusOptions[$data->status] : '-' }}</dd>
                         </dl>
                     </div>
-
                     <div class="col-md-6">
                         <dl class="row mb-0">
                             <dt class="col-sm-5">Alamat</dt>
@@ -58,7 +61,6 @@
                             <dd class="col-sm-7">{{ \Carbon\Carbon::parse($data->task_created_at)->format('d M Y H:i') }}</dd>
                         </dl>
                     </div>
-
                 </div>
                 </div>
             </div>
@@ -96,106 +98,82 @@
                             @if ($data->pbg_task_retributions)                    
                                 <div class="row">
                                     <div class="col-md-6">
-                                  <div class="mb-3">
+                                        <dl class="row mb-0">
-                                      <dt>Luas Bangunan</dt>
+                                            <dt class="col-sm-4">Luas Bangunan</dt>
-                                      <dd>{{$data->pbg_task_retributions->luas_bangunan}}</dd>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->luas_bangunan}}</dd>
-                                  </div>
+    
-                                  <div class="mb-3">
+                                            <dt class="col-sm-4">Indeks Lokalitas</dt>
-                                      <dt>Indeks Lokalitas</dt>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->indeks_lokalitas}}</dd>
-                                      <dd>{{$data->pbg_task_retributions->indeks_lokalitas}}</dd>
+                                            
-                                  </div>
+                                            <dt class="col-sm-4">Wilayah SHST</dt>
-                                  <div class="mb-3">
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->wilayah_shst}}</dd>
-                                      <dt>Wilayah SHST</dt>
+                                            
-                                      <dd>{{$data->pbg_task_retributions->wilayah_shst}}</dd>
+                                            <dt class="col-sm-4">Nama Kegiatan</dt>
-                                  </div>
+                                            <dd class="col-sm-8">{{isset($data->pbg_task_retributions->kegiatan_name) ? $data->pbg_task_retributions->kegiatan_name : '-'}}</dd>
-                                  <div class="mb-3">
+                                            
-                                      <dt>Kegiatan Name</dt>
+                                            <dt class="col-sm-4">Nilai SHST</dt>
-                                      <dd>{{$data->pbg_task_retributions->kegiatan_name}}</dd>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->nilai_shst}}</dd>
-                                  </div>
+                                            
-                                  <div class="mb-3">
+                                            <dt class="col-sm-4">Indeks Integrasi</dt>
-                                      <dt>Nilai SHST</dt>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->indeks_terintegrasi}}</dd>
-                                      <dd>{{$data->pbg_task_retributions->nilai_shst}}</dd>
+                                            
-                                  </div>
+                                            <dt class="col-sm-4">Indeks Bg Terbangun</dt>
-                                  <div class="mb-3">
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->indeks_bg_terbangun}}</dd>
-                                      <dt>Indeks Integrasi</dt>
+                                        </dl>
-                                      <dd>{{$data->pbg_task_retributions->indeks_terintegrasi}}</dd>
-                                  </div>
-                                  <div class="mb-3">
-                                      <dt>Indeks Bg Terbangun</dt>
-                                      <dd>{{$data->pbg_task_retributions->indeks_bg_terbangun}}</dd>
-                                  </div>
                                     </div>
                                     <div class="col-md-6">
-                                  <div class="mb-3">
+                                        <dl class="row mb-0">
-                                      <dt>Nilai Retribusi Bangunan</dt>
+                                            <dt class="col-sm-4">Nilai Retribusi Bangunan</dt>
-                                      <dd>{{$data->pbg_task_retributions->nilai_retribusi_bangunan}}</dd>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->nilai_retribusi_bangunan}}</dd>
-                                  </div>
+
-                                  <div class="mb-3">
+                                            <dt class="col-sm-4">Nilai Prasarana</dt>
-                                      <dt>Nilai Prasarana</dt>
+                                            <dd class="col-sm-8">{{ isset($data->pbg_task_retributions->nilai_prasarana) ? $data->pbg_task_retributions->nilai_prasarana : '-'}}</dd>
-                                      <dd>{{$data->pbg_task_retributions->nilai_prasarana}}</dd>
+                                            
-                                  </div>
+                                            <dt class="col-sm-4">PBG Dokumen</dt>
-                                  <div class="mb-3">
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->pbg_document}}</dd>
-                                      <dt>PBG Dokumen</dt>
+                                            
-                                      <dd>{{$data->pbg_task_retributions->pbg_document}}</dd>
+                                            <dt class="col-sm-4">Underpayment</dt>
-                                  </div>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->underpayment}}</dd>
-                                  <div class="mb-3">
+                                            
-                                      <dt>Underpayment</dt>
+                                            <dt class="col-sm-4">SKRD Amount</dt>
-                                      <dd>{{$data->pbg_task_retributions->underpayment}}</dd>
+                                            <dd class="col-sm-8">{{$data->pbg_task_retributions->skrd_amount}}</dd>
-                                  </div>
+                                        </dl>
-                                  <div class="mb-3">
-                                      <dt>SKRD Amount</dt>
-                                      <dd>{{$data->pbg_task_retributions->skrd_amount}}</dd>
-                                  </div>
                                     </div>
                                 </div>
                             @else
-                          <div class="row">
+                                <div class="alert alert-secondary" role="alert">
-                              <div class="col-md-12">
                                     Data Not Available
                                 </div>
-                          </div>
                             @endif
                         </div>
                         <div class="tab-pane" id="pbgTaskIntegration">
                             @if ($data->pbg_task_index_integrations)
-                          <div class="row">
+                                <dl class="row">
-                              <div class="col-md-12">
+                                    <dt class="col-sm-4">Indeks Fungsi Bangunan</dt>
-                                  <div class="mb-3">
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->indeks_fungsi_bangunan}}</dd>
-                                      <dt>Indeks Fungsi Bangunan</dt>
+
-                                      <dd>{{$data->pbg_task_index_integrations->indeks_fungsi_bangunan}}</dd>
+                                    <dt class="col-sm-4">Indeks Parameter Kompleksitas</dt>
-                                  </div>
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->indeks_parameter_kompleksitas}}</dd>
-                                  <div class="mb-3">
+
-                                      <dt>Indeks Parameter Kompleksitas</dt>
+                                    <dt class="col-sm-4">Indeks Parameter Permanensi</dt>
-                                      <dd>{{$data->pbg_task_index_integrations->indeks_parameter_kompleksitas}}</dd>
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->indeks_parameter_permanensi}}</dd>
-                                  </div>
+
-                                  <div class="mb-3">
+                                    <dt class="col-sm-4">Indeks Parameter Ketinggian</dt>
-                                      <dt>Indeks Parameter Permanensi</dt>
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->indeks_parameter_ketinggian}}</dd>
-                                      <dd>{{$data->pbg_task_index_integrations->indeks_parameter_permanensi}}</dd>
+
-                                  </div>
+                                    <dt class="col-sm-4">Faktor Kepemilikan</dt>
-                                  <div class="mb-3">
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->faktor_kepemilikan}}</dd>
-                                      <dt>Indeks Paramter Ketinggian</dt>
+
-                                      <dd>{{$data->pbg_task_index_integrations->indeks_parameter_ketinggian}}</dd>
+                                    <dt class="col-sm-4">Indeks Terintegrasi</dt>
-                                  </div>
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->indeks_terintegrasi}}</dd>
-                                  <div class="mb-3">
+
-                                      <dt>Faktor Kepemilikan</dt>
+                                    <dt class="col-sm-4">Total</dt>
-                                      <dd>{{$data->pbg_task_index_integrations->faktor_kepemilikan}}</dd>
+                                    <dd class="col-sm-8">{{$data->pbg_task_index_integrations->total}}</dd>
-                                  </div>
+                                </dl>
-                                  <div class="mb-3">
-                                      <dt>Indeks Terintegrasi</dt>
-                                      <dd>{{$data->pbg_task_index_integrations->indeks_terintegrasi}}</dd>
-                                  </div>
-                                  <div class="mb-3">
-                                      <dt>Total</dt>
-                                      <dd>{{$data->pbg_task_index_integrations->total}}</dd>
-                                  </div>
-                              </div>
-                          </div>
                             @else
-                          <div class="row">
+                                <div class="alert alert-secondary" role="alert">
-                              <div class="col-md-12">
                                     Data Not Available
                                 </div>
-                          </div>
                             @endif
                         </div>
                         <div class="tab-pane" id="pbgTaskPrasarana">
@@ -203,56 +181,49 @@
                                 @if ($data->pbg_task_retributions && $data->pbg_task_retributions->pbg_task_prasarana)
                                     @foreach ($data->pbg_task_retributions->pbg_task_prasarana as $prasarana)
                                         <div class="border p-3 rounded shadow-sm col-md-4">
-                                      <div class="mb-3">
+                                            <dl class="row">
-                                          <dt>Prasarana Type</dt>
+                                                <dt class="col-sm-4">Prasarana Type</dt>
-                                          <dd>{{$prasarana->prasarana_type}}</dd>
+                                                <dd class="col-sm-8">{{$prasarana->prasarana_type}}</dd>
-                                      </div>
+
-                                      <div class="mb-3">
+                                                <dt class="col-sm-4">Building Type</dt>
-                                          <dt>Building Type</dt>
+                                                <dd class="col-sm-8">{{$prasarana->building_type}}</dd>
-                                          <dd>{{$prasarana->building_type}}</dd>
+                                                
-                                      </div>
+                                                <dt class="col-sm-4">Total</dt>
-                                      <div class="mb-3">
+                                                <dd class="col-sm-8">{{$prasarana->total}}</dd>
-                                          <dt>Total</dt>
+                                                
-                                          <dd>{{$prasarana->total}}</dd>
+                                                <dt class="col-sm-4">Quantity</dt>
-                                      </div>
+                                                <dd class="col-sm-8">{{$prasarana->quantity}}</dd>
-                                      <div class="mb-3">
+                                                
-                                          <dt>Quantity</dt>
+                                                <dt class="col-sm-4">Unit</dt>
-                                          <dd>{{$prasarana->quantity}}</dd>
+                                                <dd class="col-sm-8">{{$prasarana->unit}}</dd>
-                                      </div>
+                                                
-                                      <div class="mb-3">
+                                                <dt class="col-sm-4">Index Prasarana</dt>
-                                          <dt>Unit</dt>
+                                                <dd class="col-sm-8">{{$prasarana->index_prasarana}}</dd>
-                                          <dd>{{$prasarana->unit}}</dd>
+                                                
-                                      </div>
+                                                <dt class="col-sm-4">Created At</dt>
-                                      <div class="mb-3">
+                                                <dd class="col-sm-8">{{\Carbon\Carbon::parse($prasarana->created_at)->format('d M Y')}}</dd>
-                                          <dt>Index Prasarana</dt>
+                                            </dl>
-                                          <dd>{{$prasarana->index_prasarana}}</dd>
-                                      </div>
-                                      <div class="mb-3">
-                                          <dt>Created At</dt>
-                                          <dd>{{$prasarana->created_at}}</dd>
-                                      </div>
                                         </div>
                                     @endforeach
                                 @else
-                              <div class="row">
+                                    <div class="alert alert-secondary" role="alert">
-                                  <div class="col-md-12">
                                         Data Not Available
                                     </div>
-                              </div>
                                 @endif
                             </div>
                         </div>
                         <div class="tab-pane" id="pbgTaskAssignments">
-                      <input type="hidden" id="uuid" value="{{ $data->uuid }}" />
+                            <input type="hidden" id="url_task_assignments" value="{{ route('api.quick-search-task-assignments', ['uuid' => $data->uuid]) }}" />
                             <div id="table-pbg-task-assignments"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
 </div>
-
 @endsection
 
 @section('scripts')
+@vite(['resources/js/quick-search/detail.js'])
 @endsection

resources/views/quick-search/index.blade.php

@@ -9,6 +9,11 @@ class="gsp-body"
 @endsection
 
 @section('content')
+<div class="position-absolute top-0 end-0 p-3">
+    <a href="{{ route('login') }}" class="btn btn-md btn-secondary">
+        Login
+    </a>
+</div>
 <div class="container min-vh-100 d-flex justify-content-center align-items-center gsp-body">
     <div class="w-100" style="max-width: 700px;">
         <div class="text-center mb-4">

resources/views/quick-search/result.blade.php

@@ -6,15 +6,35 @@
 @endsection
 
 @section('content')
-<input type="hidden" value="{{ $keyword }}" id="query_keyword" />
 <input type="hidden" value="{{ route('quick-search-datatable', ['search' => $keyword]) }}" id="base_url_datatable" />
-<div class="qs-wrapper">
+
-  <div class="qs-header">
+<div class="container qs-wrapper">
+  <div class="qs-toolbar d-flex justify-content-between align-items-center pt-4 pb-4">
+    <!-- Back Button -->
+    <a href="{{ route('search') }}" class="btn btn-light border me-3">
+       Kembali
+    </a>
+    <!-- Search Area (no form action) -->
+    <div class="qs-search-form d-flex align-items-center">
+      <input
+        type="text"
+        id="search_input"
+        class="gsp-input me-2"
+        value="{{ $keyword }}"
+        placeholder="Cari data..."
+        required
+      />
+      <button type="button" id="search_button" class="gsp-btn">Cari</button>
+    </div>
+  </div>
+
+  <div class="qs-header mb-3">
     <h2>Hasil Pencarian: <em>{{ $keyword }}</em></h2>
     <p>Berikut adalah data hasil pencarian berdasarkan kata kunci yang Anda masukkan.</p>
   </div>
+
   <div class="qs-table-wrapper">
-    <div id="datatable-quick-search-result"></div>
+    <div class="p-3" id="datatable-quick-search-result"></div>
   </div>
 </div>
 @endsection

routes/web.php

@@ -39,6 +39,7 @@ Route::get('/search', [QuickSearchController::class, 'index'])->name('search');
 Route::get('/search-result', [QuickSearchController::class, 'search_result'])->name('search-result');
 Route::get('/quick-search-datatable', [QuickSearchController::class, 'quick_search_datatable'])->name('quick-search-datatable');
 Route::get('/quick-search/{id}', [QuickSearchController::class, 'show'])->name('quick-search.detail');
+Route::get('/quick-search/{uuid}/task-assignments', [QuickSearchController::class, 'task_assignments'])->name('api.quick-search-task-assignments');
 
 // auth 
 Route::group(['middleware' => 'auth'], function(){

vite.config.js

@@ -20,6 +20,9 @@ export default defineConfig({
                 "resources/scss/components/_custom_circle.scss",
                 "resources/scss/dashboards/potentials/_inside_system.scss",
                 "resources/scss/dashboards/potentials/_outside_system.scss",
+                "resources/scss/pages/quick-search/detail.scss",
+                "resources/scss/pages/quick-search/index.scss",
+                "resources/scss/pages/quick-search/result.scss",
 
                 "node_modules/quill/dist/quill.snow.css",
                 "node_modules/quill/dist/quill.bubble.css",
@@ -109,6 +112,10 @@ export default defineConfig({
                 "resources/js/pbg-task/create.js",
                 // google-sheets
                 "resources/js/data/google-sheet/index.js",
+                // quick-search
+                "resources/js/quick-search/index.js",
+                "resources/js/quick-search/result.js",
+                "resources/js/quick-search/detail.js",
                 // dummy
                 "resources/js/approval/index.js",
                 "resources/js/invitations/index.js",