lookup focus functionality in client table view

frontend/src/components/pages/Clients.vue

@@ -34,7 +34,7 @@ import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
 import { useModalStore } from "../../stores/modal";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useNotificationStore } from "../../stores/notifications-primevue";
 
 const notifications = useNotificationStore();
@@ -43,6 +43,7 @@ const paginationStore = usePaginationStore();
 const filtersStore = useFiltersStore();
 const modalStore = useModalStore();
 const router = useRouter();
+const route = useRoute();
 
 const tableData = ref([]);
 const totalRecords = ref(0);
@@ -51,6 +52,8 @@ const statusCounts = ref({}); // Start with empty object
 const currentWeekParams = ref({});
 const chartLoading = ref(true); // Start with loading state
 
+const lookup = route.query.lookup;
+
 // Computed property to get current filters for the chart
 const currentFilters = computed(() => {
 	return filtersStore.getTableFilters("clients");
@@ -115,6 +118,7 @@ const columns = [
 		type: "text",
 		sortable: true,
 		filterable: true,
+		filterInputId: "customerSearchInput",
 	},
 	{
 		label: "Address",
@@ -122,6 +126,7 @@ const columns = [
 		type: "text",
 		sortable: true,
 		filterable: true,
+		filterInputId: "propertySearchInput",
 	},
 	{
 		label: "Appt. Scheduled",
@@ -334,6 +339,13 @@ watch(
 );
 
 onMounted(async () => {
+	// if lookup has a value (it will either be "customer" or "property", put focus onto the appropriate search input)
+	if (lookup) {
+		const inputElement = document.getElementById(`${lookup}SearchInput`);
+		if (inputElement) {
+			inputElement.focus();
+		}
+	}
 	// Initialize pagination and filters
 	paginationStore.initializeTablePagination("clients", { rows: 10 });
 	filtersStore.initializeTableFilters("clients", columns);