lookup focus functionality in client table view

frontend/src/components/SideBar.vue

@@ -27,6 +27,16 @@ const notifications = useNotificationStore();
 const isCollapsed = ref(false);
 const pendingOpen = ref(null);
 
+const focusClientInput = (inputId) => {
+	if (typeof document === "undefined") return;
+	nextTick(() => {
+		const el = document.getElementById(inputId);
+		if (el && typeof el.focus === "function") {
+			el.focus();
+		}
+	});
+};
+
 const toggleSidebar = () => {
 	isCollapsed.value = !isCollapsed.value;
 };
@@ -44,13 +54,21 @@ const clientButtons = ref([
 	{
 		label: "Customer Lookup",
 		command: () => {
-			router.push("/clients");
+			if (router.currentRoute.value.path === "/clients") {
+				focusClientInput("customerSearchInput");
+			} else {
+				router.push("/clients?lookup=customer");
+			}
 		}
 	},
 	{
 		label: "Property Lookup",
 		command: () => {
-			router.push("/clients");
+			if (router.currentRoute.value.path === "/clients") {
+				focusClientInput("propertySearchInput");
+			} else {
+				router.push("/clients?lookup=property");
+			}
 		}
 	},
 
@@ -151,7 +169,7 @@ const handleCategoryClick = (category) => {
 						'sidebar-button',
 						router.currentRoute.value.path === category.url ? 'active' : '',
 					]"
-					:key="category.name"
+					:key="`btn-${category.name}`"
 					@click="handleCategoryClick(category)"
 					:title="isCollapsed ? category.name : ''"
 				>
@@ -162,7 +180,7 @@ const handleCategoryClick = (category) => {
 			<template v-else>
 				<SidebarSpeedDial
 					v-if="!isCollapsed"
-					:key="category.name"
+					:key="`dial-${category.name}`"
 					:icon="category.icon"
 					:label="category.name"
 					:items="category.buttons"
@@ -172,7 +190,7 @@ const handleCategoryClick = (category) => {
 				<button
 					v-else
 					class="sidebar-button"
-					:key="category.name"
+					:key="`collapsed-${category.name}`"
 					:title="category.name"
 					@click="openSidebarAndDial(category)"
 			>

frontend/src/components/common/DataTable.vue

@@ -10,11 +10,11 @@
 		<div class="dt-filter-content">
 			<div class="dt-filter-grid">
 				<div v-for="col in filterableColumns" :key="col.fieldName" class="dt-filter-field">
-					<label :for="`filter-${col.fieldName}`" class="dt-filter-label">
+					<label :for="col.filterInputId || `filter-${col.fieldName}`" class="dt-filter-label">
 						{{ col.label }}
 					</label>
 					<InputText
-						:id="`filter-${col.fieldName}`"
+						:id="col.filterInputId || col.searchInputId || `filter-${col.fieldName}`"
 						v-model="pendingFilters[col.fieldName]"
 						:placeholder="`Filter by ${col.label.toLowerCase()}...`"
 						class="dt-filter-input"
@@ -259,6 +259,7 @@
 		>
 			<template v-if="col.filterable === true" #filter="{ filterModel, filterCallback }">
 				<InputText
+					:id="col.filterInputId || col.searchInputId || `inline-filter-${col.fieldName}`"
 					v-model="filterModel.value"
 					type="text"
 					@input="handleFilterInput(col.fieldName, filterModel.value, filterCallback)"

frontend/src/components/pages/Client.vue

@@ -1,48 +1,50 @@
 <template>
-	<!-- Client Header -->
-	<div class="client-header" v-if="client.customerName">
-		<div class="client-info">
-			<h2 class="client-name">{{ client.customerName }}</h2>
-			<div class="address-section" v-if="addresses.length > 0">
-				<label class="address-label">Address:</label>
-				<Select
-					v-if="addresses.length > 1"
-					v-model="selectedAddress"
-					:options="addresses"
-					class="address-dropdown"
-					placeholder="Select an address"
-				/>
-				<span v-else class="single-address">{{ addresses[0] }}</span>
+	<div class="client-page">
+		<!-- Client Header -->
+		<div class="client-header" v-if="client.customerName">
+			<div class="client-info">
+				<h2 class="client-name">{{ client.customerName }}</h2>
+				<div class="address-section" v-if="addresses.length > 0">
+					<label class="address-label">Address:</label>
+					<Select
+						v-if="addresses.length > 1"
+						v-model="selectedAddress"
+						:options="addresses"
+						class="address-dropdown"
+						placeholder="Select an address"
+					/>
+					<span v-else class="single-address">{{ addresses[0] }}</span>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<Tabs value="0">
-		<TabList>
-			<Tab value="0">Overview</Tab>
-			<Tab value="1">Projects <span class="tab-info-alert">1</span></Tab>
-			<Tab value="2">Financials</Tab>
-			<Tab value="3">History</Tab>
-		</TabList>
-		<TabPanels>
-			<TabPanel value="0">
-				<Overview
-					:client-data="client"
-					:selected-address="selectedAddress"
-					:is-new="isNew"
-				/>
-			</TabPanel>
-			<TabPanel value="1">
-				<div id="projects-tab"><h3>Project Status</h3></div>
-			</TabPanel>
-			<TabPanel value="2">
-				<div id="financials-tab"><h3>Accounting</h3></div>
-			</TabPanel>
-			<TabPanel value="3">
-				<div id="history-tab"><h3>History</h3></div>
-			</TabPanel>
-		</TabPanels>
-	</Tabs>
+		<Tabs value="0">
+			<TabList>
+				<Tab value="0">Overview</Tab>
+				<Tab value="1">Projects <span class="tab-info-alert">1</span></Tab>
+				<Tab value="2">Financials</Tab>
+				<Tab value="3">History</Tab>
+			</TabList>
+			<TabPanels>
+				<TabPanel value="0">
+					<Overview
+						:client-data="client"
+						:selected-address="selectedAddress"
+						:is-new="isNew"
+					/>
+				</TabPanel>
+				<TabPanel value="1">
+					<div id="projects-tab"><h3>Project Status</h3></div>
+				</TabPanel>
+				<TabPanel value="2">
+					<div id="financials-tab"><h3>Accounting</h3></div>
+				</TabPanel>
+				<TabPanel value="3">
+					<div id="history-tab"><h3>History</h3></div>
+				</TabPanel>
+			</TabPanels>
+		</Tabs>
+	</div>
 </template>
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";

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);