Major Refactor

src/components/SearchResults.vue

@@ -0,0 +1,53 @@
+<!-- SearchResults.vue -->
+<template>
+
+  <div class="fixed top-16 left-1/2 -translate-x-1/2 w-full max-w-2xl px-4">
+    <div class="overflow-x-auto bg-base-100 rounded-lg shadow-2xl border border-gray-700">
+      <table class="table w-full">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Address</th>
+            <th>Phone</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- It now reads `searchResults` directly from the store -->
+          <tr v-for="user in searchStore.searchResults" :key="user.id" class="hover cursor-pointer" @click="viewProfile(user.id)">
+            <td>
+              <div class="font-bold">{{ user.customer_first_name }} {{ user.customer_last_name }}</div>
+            </td>
+            <td>
+              <div>{{ user.customer_address }}</div>
+              <div class="text-sm opacity-70">{{ user.customer_town }}, {{ user.customer_state }}</div>
+            </td>
+            <td>{{ user.customer_phone_number }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+// 1. Import the store
+import { useSearchStore } from '../stores/search'; // Adjust path if needed
+
+export default defineComponent({
+  name: "SearchResults",
+  setup() {
+    // 2. Make the store available
+    const searchStore = useSearchStore();
+    return { searchStore };
+  },
+  methods: {
+    viewProfile(customerId: number) {
+      // When a user is clicked, navigate to their profile...
+      this.$router.push({ name: 'customerProfile', params: { id: customerId } });
+      // ...and clear the search so the overlay disappears.
+      this.searchStore.clearSearch();
+    }
+  }
+});
+</script>c