add global loading state, update to use real data for clients table

frontend/src/components/modals/CreatClientModal.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, watchEffect } from "vue";
+import { ref, reactive, computed, watch } from "vue";
 import { useModalStore } from "@/stores/modal";
 import Modal from "@/components/common/Modal.vue";
 import Form from "@/components/common/Form.vue";
@@ -43,11 +43,12 @@ const isVisible = computed(() => modalStore.isModalOpen("createClient"));
 const customerNames = ref([]);
 // Form data
 const formData = reactive({
-	name: "",
-	address: "",
+	customertype: "",
+	customerName: "",
+	addressLine1: "",
 	phone: "",
 	email: "",
-	zipcode: "",
+	pincode: "",
 	city: "",
 	state: "",
 });
@@ -78,12 +79,27 @@ const modalOptions = {
 // Form field definitions
 const formFields = computed(() => [
 	{
-		name: "name",
+		name: "customertype",
+		label: "Client Type",
+		type: "select",
+		required: true,
+		placeholder: "Select client type",
+		cols: 12,
+		md: 6,
+		options: [
+			{ label: "Individual", value: "Individual" },
+			{ label: "Company", value: "Company" },
+		],
+		helpText: "Select whether this is an individual or company client",
+	},
+	{
+		name: "customerName",
 		label: "Client Name",
 		type: "autocomplete", // Changed from 'select' to 'autocomplete'
 		required: true,
 		placeholder: "Type or select client name",
 		cols: 12,
+		md: 6,
 		options: customerNames.value, // Direct array of strings
 		forceSelection: false, // Allow custom entries not in the list
 		dropdown: true,
@@ -92,7 +108,7 @@ const formFields = computed(() => [
 		// Let the Form component handle filtering automatically
 	},
 	{
-		name: "address",
+		name: "addressLine1",
 		label: "Address",
 		type: "text",
 		required: true,
@@ -127,17 +143,24 @@ const formFields = computed(() => [
 		md: 6,
 	},
 	{
-		name: "zipcode",
+		name: "pincode",
 		label: "Zip Code",
 		type: "text",
 		required: true,
-		placeholder: "Enter zip code",
+		placeholder: "Enter 5-digit zip code",
 		cols: 12,
 		md: 4,
+		maxLength: 5,
+		inputMode: "numeric",
+		pattern: "[0-9]*",
 		onChangeOverride: handleZipcodeChange,
+		onInput: (value) => {
+			// Only allow numbers and limit to 5 digits
+			return value.replace(/\D/g, "").substring(0, 5);
+		},
 		validate: (value) => {
-			if (value && !/^\d{5}(-\d{4})?$/.test(value)) {
-				return "Please enter a valid zip code";
+			if (value && !/^\d{5}$/.test(value)) {
+				return "Please enter a valid 5-digit zip code";
 			}
 			return null;
 		},
@@ -148,6 +171,7 @@ const formFields = computed(() => [
 		type: availableCities.value.length > 0 ? "select" : "text",
 		required: true,
 		disabled: false,
+		showClear: availableCities.value.length > 1,
 		placeholder: availableCities.value.length > 0 ? "Select city" : "Enter city name",
 		options: availableCities.value.map((place) => ({
 			label: place["place name"],
@@ -194,7 +218,10 @@ const formFields = computed(() => [
 
 // Handle zipcode change and API lookup
 async function handleZipcodeChange(value, fieldName, currentFormData) {
-	if (fieldName === "zipcode" && value && value.length >= 5) {
+	if (value.length < 5) {
+		return;
+	}
+	if (fieldName === "pincode" && value && value.length >= 5) {
 		// Only process if it's a valid zipcode format
 		const zipcode = value.replace(/\D/g, "").substring(0, 5);
 
@@ -292,23 +319,14 @@ function getStatusIcon(type) {
 }
 
 // Handle form submission
-async function handleSubmit(submittedFormData) {
+async function handleSubmit() {
 	try {
 		showStatusMessage("Creating client...", "info");
 
 		// Convert form data to the expected format
-		const clientData = {
-			name: submittedFormData.name,
-			address: submittedFormData.address,
-			phone: submittedFormData.phone,
-			email: submittedFormData.email,
-			zipcode: submittedFormData.zipcode,
-			city: submittedFormData.city,
-			state: submittedFormData.state,
-		};
 
 		// Call API to create client
-		const response = await Api.createClient(clientData);
+		const response = await Api.createClient(formData);
 
 		if (response && response.success) {
 			showStatusMessage("Client created successfully!", "success");
@@ -366,12 +384,7 @@ watch(isVisible, async () => {
 		try {
 			const names = await Api.getCustomerNames();
 			console.log("Loaded customer names:", names);
-			console.log("Customer names type:", typeof names, Array.isArray(names));
-			console.log("First customer name:", names[0], typeof names[0]);
 			customerNames.value = names;
-
-			// Debug: Let's also set some test data to see if autocomplete works at all
-			console.log("Setting customerNames to:", customerNames.value);
 		} catch (error) {
 			console.error("Error loading customer names:", error);
 			// Set some test data to debug if autocomplete works
@@ -406,31 +419,6 @@ watch(isVisible, async () => {
 	padding: 24px;
 }
 
-/* Form styling adjustments for PrimeVue components */
-:deep(.p-inputtext),
-:deep(.p-dropdown),
-:deep(.p-autocomplete) {
-	margin-bottom: 8px;
-}
-
-/* Ensure AutoComplete panel appears above modal */
-:global(.p-autocomplete-overlay) {
-	z-index: 9999 !important;
-}
-
-:global(.p-autocomplete-panel) {
-	z-index: 9999 !important;
-}
-
-:deep(.p-button) {
-	text-transform: none;
-	font-weight: 500;
-}
-
-:deep(.p-button:not(.p-button-text)) {
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 /* Status message styling */
 .status-message {
 	padding: 12px 16px;