fix client creation

frontend/src/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { IconoirProvider } from "@iconoir/vue";
 import SideBar from "./components/SideBar.vue";
-import CompanySelector from "./components/CompanySelector.vue";
 import { watchEffect, onMounted, ref } from "vue";
 import { useCompanyStore } from "@/stores/company";
 import { useThemeStore } from "@/stores/theme";
@@ -48,7 +47,6 @@ watchEffect(() => {
 	>
 		<div id="snw-ui">
 			<div class="sidebar-column">
-				<CompanySelector />
 				<SideBar />
 			</div>
 			<div id="display-content">
@@ -84,7 +82,7 @@ watchEffect(() => {
 	width: 100%;
 	margin: 10px auto;
 	height: 90vh;
-	background: linear-gradient(145deg, var(--theme-surface) 0%, var(--theme-surface-alt) 60%);
+	background: var(--theme-gradient);
 }
 
 .sidebar-column {

frontend/src/components/CompanySelector.vue

@@ -16,8 +16,8 @@ const selectedCompany = computed({
 
 const fontSize = computed(() => {
 	const len = selectedCompany.value.length;
-	if (len > 12) return '0.75rem';
-	if (len > 10) return '0.8rem';
+	if (len > 12) return '0.71rem';
+	if (len > 10) return '0.75rem';
 	return '0.875rem';
 });
 </script>
@@ -41,7 +41,7 @@ const fontSize = computed(() => {
 }
 
 .company-select {
-	width: 170px;
+	width: 100%;
 }
 
 :deep(.p-select) {

frontend/src/components/SideBar.vue

@@ -3,6 +3,7 @@ import { ref, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { useModalStore } from "@/stores/modal";
 import { useNotificationStore } from "@/stores/notifications-primevue"
+import CompanySelector from "./CompanySelector.vue";
 import {
 	Home,
 	Community,
@@ -153,6 +154,9 @@ const handleCategoryClick = (category) => {
 
 <template>
 	<div id="sidebar" class="sidebar" :class="{ collapsed: isCollapsed }">
+		<div class="sidebar-top" :class="{ collapsed: isCollapsed }">
+			<CompanySelector />
+		</div>
 		<!-- Toggle Button -->
 		<button
 			class="sidebar-toggle"
@@ -282,7 +286,6 @@ const handleCategoryClick = (category) => {
 	display: flex;
 	flex-direction: column;
 	width: 170px;
-	min-width: 170px;
 	align-self: flex-start;
 	gap: 5px;
 	background-color: var(--theme-surface-alt);
@@ -294,6 +297,15 @@ const handleCategoryClick = (category) => {
 	transition: all 0.3s ease;
 }
 
+.sidebar-top {
+	margin-bottom: 6px;
+}
+
+.sidebar-top.collapsed {
+	margin-bottom: 8px;
+	width: 100%;
+}
+
 #sidebar.collapsed {
 	width: 56px;
 	min-width: 56px;

frontend/src/components/SidebarSpeedDial.vue

@@ -36,6 +36,7 @@ const handleItem = (item) => {
 	if (typeof item?.command === "function") {
 		item.command();
 	}
+	toggle();
 };
 
 watch(

frontend/src/components/clientSubPages/ClientInformationForm.vue

@@ -1,78 +1,87 @@
 <template>
-	<div class="form-section">
-		<div class="section-header">
-			<h3>Client Information</h3>
-			<label class="toggle-container" v-if="!isEditMode">
-				<v-switch v-model="isNewClient" color="success" />
-				<span class="toggle-label">New Client</span>
-			</label>
-		</div>
-		<div class="form-grid">
-			<div class="form-field">
-				<label for="customer-name"> Customer Name <span class="required">*</span> </label>
-				<div class="input-with-button">
-					<InputText
-						id="customer-name"
-						v-model="localFormData.customerName"
-						:disabled="isSubmitting || isEditMode"
-						placeholder="Enter customer name"
+	<div>
+		<div class="form-section">
+			<div class="section-header">
+				<h3>Client Information</h3>
+				<label class="toggle-container" v-if="!isEditMode">
+					<v-switch v-model="isNewClient" color="success" />
+					<span class="toggle-label">New Client</span>
+				</label>
+			</div>
+			<div class="form-grid">
+				<div class="form-field">
+					<label for="customer-name"> Customer Name <span class="required">*</span> </label>
+					<div class="input-with-button">
+						<InputText
+							id="customer-name"
+							v-model="localFormData.customerName"
+							:disabled="isSubmitting || isEditMode"
+							placeholder="Enter customer name"
+							class="w-full"
+						/>
+						<Button
+							label="Check Client"
+							size="small"
+							icon="pi pi-user-check"
+							class="check-btn"
+							@click="checkCustomerExists"
+							:disabled="isSubmitting || !localFormData.customerName.trim()"
+						>Check</Button>
+						<Button
+							v-if="!isNewClient && !isEditMode"
+							@click="searchCustomers"
+							:disabled="isSubmitting || !localFormData.customerName.trim()"
+							size="small"
+							icon="pi pi-search"
+							class="search-btn"
+						></Button>
+					</div>
+				</div>
+				<div class="form-field">
+					<label for="customer-type"> Customer Type <span class="required">*</span> </label>
+					<Select
+						id="customer-type"
+						v-model="localFormData.customerType"
+						:options="customerTypeOptions"
+						:disabled="isSubmitting || (!isNewClient && !isEditMode)"
+						placeholder="Select customer type"
 						class="w-full"
 					/>
-					<Button
-						v-if="!isNewClient && !isEditMode"
-						@click="searchCustomers"
-						:disabled="isSubmitting || !localFormData.customerName.trim()"
-						size="small"
-						icon="pi pi-search"
-						class="search-btn"
-					></Button>
 				</div>
 			</div>
-			<div class="form-field">
-				<label for="customer-type"> Customer Type <span class="required">*</span> </label>
-				<Select
-					id="customer-type"
-					v-model="localFormData.customerType"
-					:options="customerTypeOptions"
-					:disabled="isSubmitting || (!isNewClient && !isEditMode)"
-					placeholder="Select customer type"
-					class="w-full"
-				/>
-			</div>
 		</div>
+
+		<!-- Customer Search Results Modal -->
+		<Dialog
+			:visible="showCustomerSearchModal"
+			@update:visible="showCustomerSearchModal = $event"
+			header="Select Customer"
+			:modal="true"
+			class="search-dialog"
+		>
+			<div class="search-results">
+				<div v-if="customerSearchResults.length === 0" class="no-results">
+					<i class="pi pi-info-circle"></i>
+					<p>No customers found matching your search.</p>
+				</div>
+				<div v-else class="results-list">
+					<div
+						v-for="(customerName, index) in customerSearchResults"
+						:key="index"
+						class="result-item"
+						@click="selectCustomer(customerName)"
+					>
+						<strong>{{ customerName }}</strong>
+						<i class="pi pi-chevron-right"></i>
+					</div>
+				</div>
+			</div>
+			<template #footer>
+				<Button label="Cancel" severity="secondary" @click="showCustomerSearchModal = false" />
+			</template>
+		</Dialog>
 	</div>
-
-	<!-- Customer Search Results Modal -->
-	<Dialog
-		v-model:visible="showCustomerSearchModal"
-		header="Select Customer"
-		:modal="true"
-		class="search-dialog"
-	>
-		<div class="search-results">
-			<div v-if="customerSearchResults.length === 0" class="no-results">
-				<i class="pi pi-info-circle"></i>
-				<p>No customers found matching your search.</p>
-			</div>
-			<div v-else class="results-list">
-				<div
-					v-for="(customerName, index) in customerSearchResults"
-					:key="index"
-					class="result-item"
-					@click="selectCustomer(customerName)"
-				>
-					<strong>{{ customerName }}</strong>
-					<i class="pi pi-chevron-right"></i>
-				</div>
-			</div>
-		</div>
-		<template #footer>
-			<Button label="Cancel" severity="secondary" @click="showCustomerSearchModal = false" />
-		</template>
-	</Dialog>
-</template>
-
-<script setup>
+</template><script setup>
 import { ref, watch, computed } from "vue";
 import InputText from "primevue/inputtext";
 import Select from "primevue/select";
@@ -109,6 +118,30 @@ const showCustomerSearchModal = ref(false);
 const customerSearchResults = ref([]);
 const customerTypeOptions = ["Individual", "Partnership", "Company"];
 
+const mapContactsFromClient = (contacts = []) => {
+	if (!Array.isArray(contacts) || contacts.length === 0) {
+		return [
+			{
+				firstName: "",
+				lastName: "",
+				phoneNumber: "",
+				email: "",
+				contactRole: "",
+				isPrimary: true,
+			},
+		];
+	}
+
+	return contacts.map((contact, index) => ({
+		firstName: contact.firstName || "",
+		lastName: contact.lastName || "",
+		phoneNumber: contact.phoneNumber || contact.phone || contact.mobileNo || "",
+		email: contact.email || contact.emailId || contact.customEmail || "",
+		contactRole: contact.contactRole || contact.role || "",
+		isPrimary: contact.isPrimary ?? contact.isPrimaryContact ?? index === 0,
+	}));
+};
+
 // Watch for toggle changes
 watch(isNewClient, (newValue) => {
 	emit("newClientToggle", newValue);
@@ -138,6 +171,45 @@ const searchCustomers = async () => {
 	}
 };
 
+const checkCustomerExists = async () => {
+	const searchTerm = localFormData.value.customerName.trim();
+	if (!searchTerm) return;
+
+	try {
+		const client = await Api.getClient(searchTerm);
+
+		if (!client) {
+			notificationStore.addInfo("Customer is not in our system yet.");
+			return;
+		}
+
+		localFormData.value.customerName = client.customerName || searchTerm;
+		localFormData.value.customerType = client.customerType || localFormData.value.customerType;
+		localFormData.value.contacts = mapContactsFromClient(client.contacts);
+
+		isNewClient.value = false;
+		showCustomerSearchModal.value = false;
+
+		emit("customerSelected", client);
+		notificationStore.addSuccess(
+			`Customer ${localFormData.value.customerName} found and loaded from system.`,
+		);
+	} catch (error) {
+		console.error("Error checking customer:", error);
+		const message =
+			typeof error?.message === "string" &&
+			error.message.toLowerCase().includes("not found")
+				? "Customer is not in our system yet."
+				: "Failed to check customer. Please try again.";
+
+		if (message.includes("not in our system")) {
+			notificationStore.addInfo(message);
+		} else {
+			notificationStore.addError(message);
+		}
+	}
+};
+
 const selectCustomer = async (customerName) => {
 	try {
 		// Fetch full customer data
@@ -145,6 +217,7 @@ const selectCustomer = async (customerName) => {
 
 		localFormData.value.customerName = clientData.customerName;
 		localFormData.value.customerType = clientData.customerType;
+		localFormData.value.contacts = mapContactsFromClient(clientData.contacts);
 		showCustomerSearchModal.value = false;
 
 		// Pass the full client data including contacts
@@ -306,6 +379,24 @@ defineExpose({
 	background: var(--surface-hover);
 }
 
+.check-btn {
+	border: 1px solid var(--primary-color);
+	color: var(--primary-color);
+	background: var(--surface-card);
+	padding: 0.25rem 0.75rem;
+	min-width: 8rem;
+	justify-content: center;
+}
+
+.check-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.check-btn:hover:not(:disabled) {
+	background: var(--surface-hover);
+}
+
 .search-btn {
 	background: var(--primary-color);
 	border: 1px solid var(--primary-color);
@@ -317,6 +408,7 @@ defineExpose({
 	border-radius: 4px;
 	transition: background 0.2s;
 	color: white;
+	min-width: 8rem;
 }
 
 .search-btn:disabled {

frontend/src/stores/company.js

@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 
 export const useCompanyStore = defineStore("company", {
 	state: () => ({
-		companies: ["SprinklersNW", "Nuco Yard Care", "Lowe Fencing", "Veritas Stone", "Daniel's Landscape Supplies"],
-		selectedCompany: "SprinklersNW",
+		companies: ["Sprinklers Northwest", "Nuco Yard Care", "Lowe Fencing", "Veritas Stone", "Daniels Landscape Supplies"],
+		selectedCompany: "Sprinklers Northwest",
 	}),
 
 	getters: {

frontend/src/stores/theme.js

@@ -1,15 +1,17 @@
 import { defineStore } from "pinia";
 
 const themeMap = {
-	SprinklersNW: {
-		primary: "#0f7ac7",
-		primaryStrong: "#0c639f",
+	"Sprinklers Northwest": {
+		primary: "#75bdf1ff",
+		primaryStrong: "#068ee9ff",
 		secondary: "#2ca66f",
 		accent: "#8fd9a8",
-		primaryGradientStart: "#0c639f",
+		primaryGradientStart: "#70b9e9ff",
 		primaryGradientEnd: "#1390e0",
+		primaryGradient: "linear-gradient(90deg, #a6d2f0ff 0%, #a1d7f8ff 100%)",
 		secondaryGradientStart: "#2c9b64",
 		secondaryGradientEnd: "#38c487",
+		secondaryGradient: "linear-gradient(90deg, #2c9b64 0%, #38c487 100%)",
 		surface: "#cadcf1ff",
 		surfaceAlt: "#dbfdefff",
 		border: "#cfe5f7",
@@ -26,8 +28,10 @@ const themeMap = {
 		accent: "#f7de6d",
 		primaryGradientStart: "#2f6425",
 		primaryGradientEnd: "#4a9f3a",
+		primaryGradient: "linear-gradient(90deg, #2f6425 0%, #4a9f3a 100%)",
 		secondaryGradientStart: "#d2a106",
 		secondaryGradientEnd: "#f7de6d",
+		secondaryGradient: "linear-gradient(90deg, #d2a106 0%, #f7de6d 100%)",
 		surface: "#f7fbe9",
 		surfaceAlt: "#f1f4d6",
 		border: "#dfe8b5",
@@ -44,8 +48,10 @@ const themeMap = {
 		accent: "#9cc6ff",
 		primaryGradientStart: "#232d3f",
 		primaryGradientEnd: "#375073",
+		primaryGradient: "linear-gradient(90deg, #232d3f 0%, #375073 100%)",
 		secondaryGradientStart: "#4f8ee5",
 		secondaryGradientEnd: "#5fa4ff",
+		secondaryGradient: "linear-gradient(90deg, #4f8ee5 0%, #5fa4ff 100%)",
 		surface: "#f5f7fb",
 		surfaceAlt: "#e7ecf5",
 		border: "#ced6e5",
@@ -62,8 +68,10 @@ const themeMap = {
 		accent: "#d8d0c5",
 		primaryGradientStart: "#5e564d",
 		primaryGradientEnd: "#8a8073",
+		primaryGradient: "linear-gradient(90deg, #5e564d 0%, #8a8073 100%)",
 		secondaryGradientStart: "#b2a89c",
 		secondaryGradientEnd: "#cfc6b8",
+		secondaryGradient: "linear-gradient(90deg, #b2a89c 0%, #cfc6b8 100%)",
 		surface: "#f7f5f2",
 		surfaceAlt: "#ebe6df",
 		border: "#d8d0c5",
@@ -73,15 +81,17 @@ const themeMap = {
 		textDark: "#231c16",
 		textLight: "#ffffff",
 	},
-	"Daniel's Landscape Supplies": {
+	"Daniels Landscape Supplies": {
 		primary: "#2f6b2f",
 		primaryStrong: "#245224",
 		secondary: "#f28c28",
 		accent: "#ffc174",
 		primaryGradientStart: "#245224",
 		primaryGradientEnd: "#3a8a3a",
+		primaryGradient: "linear-gradient(90deg, #245224 0%, #3a8a3a 100%)",
 		secondaryGradientStart: "#f28c28",
 		secondaryGradientEnd: "#ffc174",
+		secondaryGradient: "linear-gradient(90deg, #f28c28 0%, #ffc174 100%)",
 		surface: "#f8fbf4",
 		surfaceAlt: "#f2f1e9",
 		border: "#d9e5cc",
@@ -109,8 +119,10 @@ export const useThemeStore = defineStore("theme", {
 			root.style.setProperty("--theme-accent", theme.accent);
 			root.style.setProperty("--theme-gradient-start", theme.primaryGradientStart);
 			root.style.setProperty("--theme-gradient-end", theme.primaryGradientEnd);
+			root.style.setProperty("--theme-gradient", theme.primaryGradient);
 			root.style.setProperty("--theme-secondary-gradient-start", theme.secondaryGradientStart);
 			root.style.setProperty("--theme-secondary-gradient-end", theme.secondaryGradientEnd);
+			root.style.setProperty("--theme-secondary-gradient", theme.secondaryGradient);
 			root.style.setProperty("--theme-surface", theme.surface);
 			root.style.setProperty("--theme-surface-alt", theme.surfaceAlt);
 			root.style.setProperty("--theme-border", theme.border);