Add global quick search across projects, requests, and submittals

Author: Lewis

app/Http/Controllers/GlobalSearchController.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\DrawingRequest;
+use App\Models\DrawingSubmittal;
+use App\Models\Project;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class GlobalSearchController extends Controller
+{
+    public function __invoke(Request $request): JsonResponse
+    {
+        $query = trim((string) $request->string('q'));
+
+        if ($query === '') {
+            return response()->json(['data' => []]);
+        }
+
+        $projects = Project::query()
+            ->with('customer:id,name')
+            ->where(function ($q) use ($query): void {
+                $q->where('project_number', 'like', "%{$query}%")
+                    ->orWhere('name', 'like', "%{$query}%");
+            })
+            ->orderByDesc('updated_at')
+            ->limit(5)
+            ->get()
+            ->map(fn (Project $project): array => [
+                'type' => 'project',
+                'title' => $project->project_number.' · '.$project->name,
+                'subtitle' => $project->customer?->name,
+                'url' => route('projects.show', $project),
+            ]);
+
+        $requests = DrawingRequest::query()
+            ->with('project:id,project_number,name')
+            ->where(function ($q) use ($query): void {
+                $q->where('request_number', 'like', "%{$query}%")
+                    ->orWhere('title', 'like', "%{$query}%")
+                    ->orWhere('job_number', 'like', "%{$query}%");
+            })
+            ->orderByDesc('updated_at')
+            ->limit(5)
+            ->get()
+            ->map(fn (DrawingRequest $drawingRequest): array => [
+                'type' => 'drawing_request',
+                'title' => $drawingRequest->request_number.' · '.$drawingRequest->title,
+                'subtitle' => $drawingRequest->project?->project_number,
+                'url' => route('drawing-requests.show', $drawingRequest),
+            ]);
+
+        $submittals = DrawingSubmittal::query()
+            ->with('project:id,project_number,name')
+            ->where(function ($q) use ($query): void {
+                $q->where('submittal_number', 'like', "%{$query}%")
+                    ->orWhere('revision', 'like', "%{$query}%");
+            })
+            ->orderByDesc('updated_at')
+            ->limit(5)
+            ->get()
+            ->map(fn (DrawingSubmittal $submittal): array => [
+                'type' => 'submittal',
+                'title' => $submittal->submittal_number.' · Rev '.$submittal->revision,
+                'subtitle' => $submittal->project?->project_number,
+                'url' => route('submittals.show', $submittal),
+            ]);
+
+        return response()->json([
+            'data' => $projects
+                ->concat($requests)
+                ->concat($submittals)
+                ->take(12)
+                ->values(),
+        ]);
+    }
+}

resources/js/Layouts/AppLayout.vue

@@ -19,7 +19,12 @@ const showNotifications = ref(false);
 const notifications = ref([]);
 const unreadCount = ref(user.value?.notification_unread_count ?? 0);
 const isLoadingNotifications = ref(false);
+const globalSearchQuery = ref('');
+const globalSearchResults = ref([]);
+const showGlobalSearchResults = ref(false);
+const isGlobalSearchLoading = ref(false);
 let notificationsPoller = null;
+let globalSearchDebounce = null;
 
 function applyTheme(nextTheme) {
   const root = document.documentElement;
@@ -107,6 +112,58 @@ function toggleNotifications() {
   }
 }
 
+async function runGlobalSearch() {
+  const query = globalSearchQuery.value.trim();
+
+  if (query.length < 2) {
+    globalSearchResults.value = [];
+    showGlobalSearchResults.value = false;
+    return;
+  }
+
+  isGlobalSearchLoading.value = true;
+
+  try {
+    const response = await window.axios.get(route('search.global'), {
+      params: { q: query },
+    });
+
+    globalSearchResults.value = response.data?.data ?? [];
+    showGlobalSearchResults.value = true;
+  } catch {
+    globalSearchResults.value = [];
+    showGlobalSearchResults.value = true;
+  } finally {
+    isGlobalSearchLoading.value = false;
+  }
+}
+
+function onGlobalSearchInput() {
+  if (globalSearchDebounce !== null) {
+    clearTimeout(globalSearchDebounce);
+  }
+
+  globalSearchDebounce = setTimeout(() => {
+    runGlobalSearch();
+  }, 220);
+}
+
+function openGlobalSearchResult(result) {
+  globalSearchQuery.value = '';
+  globalSearchResults.value = [];
+  showGlobalSearchResults.value = false;
+
+  if (result?.url) {
+    router.visit(result.url);
+  }
+}
+
+function hideGlobalSearchResults() {
+  setTimeout(() => {
+    showGlobalSearchResults.value = false;
+  }, 120);
+}
+
 function logout() {
   router.post(route('logout'));
 }
@@ -132,6 +189,10 @@ onBeforeUnmount(() => {
   if (notificationsPoller !== null) {
     clearInterval(notificationsPoller);
   }
+
+  if (globalSearchDebounce !== null) {
+    clearTimeout(globalSearchDebounce);
+  }
 });
 
 watch(theme, (nextTheme) => {
@@ -188,6 +249,47 @@ watch(theme, (nextTheme) => {
 
           <!-- User Menu -->
           <div class="hidden sm:flex sm:items-center sm:space-x-4">
+            <div class="relative">
+              <input
+                v-model="globalSearchQuery"
+                type="search"
+                placeholder="Search #, project, request, submittal..."
+                class="w-80 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
+                @input="onGlobalSearchInput"
+                @focus="onGlobalSearchInput"
+                @blur="hideGlobalSearchResults"
+              />
+
+              <div
+                v-if="showGlobalSearchResults"
+                class="absolute right-0 z-50 mt-2 w-[28rem] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900"
+              >
+                <div
+                  v-if="isGlobalSearchLoading"
+                  class="px-4 py-3 text-sm text-gray-500 dark:text-slate-300"
+                >
+                  Searching...
+                </div>
+                <div
+                  v-else-if="globalSearchResults.length === 0"
+                  class="px-4 py-3 text-sm text-gray-500 dark:text-slate-300"
+                >
+                  No matches found.
+                </div>
+                <button
+                  v-for="result in globalSearchResults"
+                  :key="`${result.type}-${result.url}`"
+                  type="button"
+                  class="block w-full border-b border-gray-100 px-4 py-3 text-left last:border-b-0 hover:bg-gray-50 dark:border-slate-800 dark:hover:bg-slate-800"
+                  @mousedown.prevent="openGlobalSearchResult(result)"
+                >
+                  <p class="text-sm font-medium text-gray-900 dark:text-slate-100">{{ result.title }}</p>
+                  <p class="mt-1 text-xs text-gray-500 dark:text-slate-400">
+                    {{ result.type.replace('_', ' ') }}<span v-if="result.subtitle"> · {{ result.subtitle }}</span>
+                  </p>
+                </button>
+              </div>
+            </div>
             <div class="relative">
               <button
                 type="button"

routes/web.php

@@ -9,6 +9,7 @@
 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\DrawingRequestController;
 use App\Http\Controllers\FabQueueController;
+use App\Http\Controllers\GlobalSearchController;
 use App\Http\Controllers\NotificationController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\ProjectAttachmentController;
@@ -38,6 +39,7 @@
     Route::put('/profile/avatar', [ProfileController::class, 'updateAvatar'])->name('profile.avatar.update');
     Route::put('/profile/password', [ProfileController::class, 'updatePassword'])->name('profile.password.update');
     Route::get('/notifications', [NotificationController::class, 'index'])->name('notifications.index');
+    Route::get('/search/global', GlobalSearchController::class)->name('search.global');
     Route::post('/notifications/read-all', [NotificationController::class, 'markAllAsRead'])->name('notifications.read-all');
     Route::post('/notifications/{notification}/read', [NotificationController::class, 'markAsRead'])->name('notifications.read');
 

tests/Feature/GlobalSearchTest.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Models\Customer;
+use App\Models\DrawingRequest;
+use App\Models\DrawingSubmittal;
+use App\Models\Project;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class GlobalSearchTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_global_search_returns_project_request_and_submittal_matches(): void
+    {
+        $user = User::factory()->create();
+
+        $customer = Customer::create([
+            'name' => 'Search Customer',
+            'active' => true,
+        ]);
+
+        $project = Project::create([
+            'project_number' => 'FIND-100',
+            'name' => 'Find Me Project',
+            'customer_id' => $customer->id,
+            'status' => 'active',
+        ]);
+
+        $request = DrawingRequest::create([
+            'request_number' => 'DR-2026-7777',
+            'project_id' => $project->id,
+            'customer_id' => $customer->id,
+            'requested_by_user_id' => $user->id,
+            'assigned_to_user_id' => $user->id,
+            'title' => 'Find Request',
+            'priority' => 'normal',
+            'drawing_type' => 'structural',
+            'requested_date' => now()->toDateString(),
+            'status' => 'pending',
+        ]);
+
+        $submittal = DrawingSubmittal::create([
+            'submittal_number' => 'SUB-2026-7777',
+            'drawing_request_id' => $request->id,
+            'project_id' => $project->id,
+            'customer_id' => $customer->id,
+            'revision' => 'A',
+            'submitted_by_user_id' => $user->id,
+            'purpose' => 'for_approval',
+            'drawing_discipline' => 'commercial_structural',
+            'status' => 'draft',
+        ]);
+
+        $response = $this->actingAs($user)
+            ->getJson(route('search.global', ['q' => '7777']));
+
+        $response->assertOk();
+        $response->assertJsonStructure([
+            'data' => [
+                ['type', 'title', 'subtitle', 'url'],
+            ],
+        ]);
+
+        $payload = $response->json('data');
+
+        $this->assertTrue(collect($payload)->contains(fn ($row) => ($row['url'] ?? '') === route('drawing-requests.show', $request)));
+        $this->assertTrue(collect($payload)->contains(fn ($row) => ($row['url'] ?? '') === route('submittals.show', $submittal)));
+    }
+
+    public function test_global_search_returns_empty_for_short_query(): void
+    {
+        $user = User::factory()->create();
+
+        $response = $this->actingAs($user)
+            ->getJson(route('search.global', ['q' => ' ']));
+
+        $response->assertOk();
+        $response->assertExactJson([
+            'data' => [],
+        ]);
+    }
+}