Added the Invoice Modal.

custom_ui/api/db.py

@@ -171,6 +171,16 @@ def upsert_job(data):
     pass
 
 
+@frappe.whitelist()
+def upsert_invoice(data):
+    pass
+
+
+@frappe.whitelist()
+def upsert_warranty(data):
+    pass
+
+
 @frappe.whitelist()
 def upsert_client(data):
     data = json.loads(data)

frontend/src/App.vue

@@ -4,6 +4,7 @@ import SideBar from "./components/SideBar.vue";
 import CreateClientModal from "./components/modals/CreateClientModal.vue";
 import CreateEstimateModal from "./components/modals/CreateEstimateModal.vue";
 import CreateJobModal from "./components/modals/CreateJobModal.vue";
+import CreateInvoiceModal from "./components/modals/CreateInvoiceModal.vue";
 import GlobalLoadingOverlay from "./components/common/GlobalLoadingOverlay.vue";
 import ScrollPanel from "primevue/scrollpanel";
 </script>
@@ -30,6 +31,7 @@ import ScrollPanel from "primevue/scrollpanel";
 		<CreateClientModal />
 		<CreateEstimateModal />
 		<CreateJobModal />
+		<CreateInvoiceModal />
 
 		<!-- Global Loading Overlay -->
 		<GlobalLoadingOverlay />

frontend/src/api.js

@@ -5,6 +5,7 @@ const FRAPPE_PROXY_METHOD = "custom_ui.api.proxy.request";
 const FRAPPE_UPSERT_CLIENT_METHOD = "custom_ui.api.db.upsert_client";
 const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.upsert_estimate";
 const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.upsert_job";
+const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.upsert_invoice";
 
 class Api {
 	static async request(frappeMethod, args = {}) {
@@ -425,6 +426,13 @@ class Api {
 		return result
 	}
 
+	static async createInvoice(invoiceData) {
+		const payload = DataUtils.toSnakeCaseObject(invoiceData);
+		const result = await this.request(FRAPPE_UPSERT_INVOICE_METHOD, { data: payload });
+		console.log("DEBUG: API - Created Invoice: ", result);
+		return result
+	}
+
 	// External API calls
 
 	/**

frontend/src/components/SideBar.vue

@@ -55,7 +55,7 @@ const createButtons = ref([
 	{
 		label: "Invoice",
 		command: () => {
-			alert("Create Invoice clicked");
+			modalStore.openModal("createInvoice");
 		},
 	},
 	{

frontend/src/components/modals/CreateInvoiceModal.vue

@@ -0,0 +1,398 @@
+<template>
+	<Modal
+		:visible="isVisible"
+		:options="modalOptions"
+		@update:visible="handleVisibilityChange"
+		@close="handleClose"
+	>
+		<template #title> Create New Invoice </template>
+
+		<!-- Status Message -->
+		<div v-if="statusMessage" class="status-message" :class="`status-${statusType}`">
+			<i :class="getStatusIcon(statusType)" class="status-icon"></i>
+			{{ statusMessage }}
+		</div>
+
+		<Form
+			ref="formRef"
+			:fields="formFields"
+			:form-data="formData"
+			:show-cancel-button="true"
+			:validate-on-change="false"
+			:validate-on-blur="true"
+			:validate-on-submit="true"
+			:loading="isSubmitting"
+			:disable-on-loading="true"
+			submit-button-text="Create Invoice"
+			cancel-button-text="Cancel"
+			@submit="handleSubmit"
+			@cancel="handleCancel"
+		/>
+	</Modal>
+</template>
+
+<script setup>
+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";
+import Api from "@/api";
+import DataUtils from "../../utils";
+
+const modalStore = useModalStore();
+
+// Modal visibility computed property
+const isVisible = computed(() => modalStore.isModalOpen("createInvoice"));
+const customerNames = ref([]);
+const companyNames = ref([]);
+// Form reference for controlling its state
+const formRef = ref(null);
+// Form data
+const formData = reactive({
+	customerName: "",
+	address: "",
+	company: "",
+	dueDate: "",
+});
+
+// Status message for user feedback
+const statusMessage = ref("");
+const statusType = ref("info"); // 'info', 'warning', 'error', 'success'
+
+// Modal configuration
+const modalOptions = {
+	maxWidth: "600px",
+	persistent: false,
+	showActions: false,
+	title: "Create New Invoice",
+	overlayColor: "rgb(59, 130, 246)", // Blue background
+	overlayOpacity: 0.8,
+	cardClass: "create-invoice-modal",
+	closeOnOutsideClick: true,
+	closeOnEscape: true,
+};
+
+// Form field definitions
+const formFields = computed(() => [
+	{
+		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,
+		// For string arrays, don't set optionLabel at all
+		helpText: "Select an existing client or enter a new client name",
+		// Let the Form component handle filtering automatically
+	},
+	{
+		name: "address",
+		label: "Address",
+		type: "text",
+		required: true,
+		placeholder: "Enter street address",
+		cols: 12,
+		md: 6,
+	},
+	{
+		name: "company",
+		label: "Company",
+		type: "autocomplete",
+		required: true,
+		placeholder: "Type or select Company",
+		cols: 12,
+		md: 6,
+		options: companyNames.value,
+		forceSelection: true,
+		dropdown: true,
+		helpText: "Select the company associated with this Invoice."
+	},
+	{
+		name: "dueDate",
+		label: "Due Date",
+		type: "date",
+		required: true,
+		cols: 12,
+		md: 6
+	}
+]);
+
+// Handle zipcode change and API lookup
+async function handleZipcodeChange(value, fieldName, currentFormData) {
+	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);
+
+		if (zipcode.length === 5) {
+			isLoadingZipcode.value = true;
+
+			try {
+				const places = await Api.getCityStateByZip(zipcode);
+				console.log("API response for zipcode", zipcode, ":", places);
+
+				if (places && places.length > 0) {
+					availableCities.value = places;
+
+					// Update the reactive formData directly to ensure reactivity
+					// Use "state abbreviation" instead of "state" for proper abbreviation format
+					const stateValue = places[0]["state abbreviation"] || places[0].state;
+					console.log("Setting state to:", stateValue, "from place object:", places[0]);
+					formData.state = stateValue;
+
+					// If only one city, auto-select it
+					if (places.length === 1) {
+						formData.city = places[0]["place name"];
+						showStatusMessage(
+							`Location found: ${places[0]["place name"]}, ${places[0]["state abbreviation"] || places[0].state}`,
+							"success",
+						);
+					} else {
+						// Clear city selection if multiple cities
+						formData.city = "";
+						showStatusMessage(
+							`Found ${places.length} cities for this zip code. Please select one.`,
+							"info",
+						);
+					}
+				} else {
+					// No results found - enable manual entry
+					handleApiFailure("No location data found for this zip code");
+				}
+			} catch (error) {
+				console.error("Error fetching city/state data:", error);
+
+				// Check if it's a network/CORS error
+				if (error.code === "ERR_NETWORK" || error.message.includes("Network Error")) {
+					handleApiFailure(
+						"Unable to fetch location data. Please enter city and state manually.",
+					);
+				} else {
+					handleApiFailure(
+						"Location lookup failed. Please enter city and state manually.",
+					);
+				}
+			} finally {
+				isLoadingZipcode.value = false;
+			}
+		}
+	}
+}
+
+// Handle API failure by enabling manual entry
+function handleApiFailure(message) {
+	console.warn("Zipcode API failed:", message);
+
+	// Clear existing data
+	availableCities.value = [];
+	formData.city = "";
+	formData.state = "";
+
+	// Show user-friendly message
+	showStatusMessage(message, "warning");
+}
+
+// Show status message to user
+function showStatusMessage(message, type = "info") {
+	statusMessage.value = message;
+	statusType.value = type;
+
+	// Auto-clear message after 5 seconds
+	setTimeout(() => {
+		statusMessage.value = "";
+	}, 5000);
+}
+
+// Get icon class for status messages
+function getStatusIcon(type) {
+	switch (type) {
+		case "warning":
+			return "pi pi-exclamation-triangle";
+		case "error":
+			return "pi pi-times-circle";
+		case "success":
+			return "pi pi-check-circle";
+		default:
+			return "pi pi-info-circle";
+	}
+}
+
+// Submission state to prevent double submission
+const isSubmitting = ref(false);
+
+// Handle form submission
+async function handleSubmit(formDataFromEvent) {
+	// Prevent double submission with detailed logging
+	if (isSubmitting.value) {
+		console.warn(
+			"CreateInvoiceModal: Form submission already in progress, ignoring duplicate submission",
+		);
+		return;
+	}
+
+	console.log(
+		"CreateInvoiceModal: Form submission started with data:",
+		formDataFromEvent || formData,
+	);
+
+	isSubmitting.value = true;
+
+	try {
+		showStatusMessage("Creating invoice...", "info");
+
+		// Use the form data from the event if provided, otherwise use reactive formData
+		const dataToSubmit = formDataFromEvent || formData;
+
+		console.log("CreateInvoiceModal: Calling API with data:", dataToSubmit);
+
+		// Call API to create invoice
+		const response = await Api.createInvoice(dataToSubmit);
+
+		console.log("CreateInvoiceModal: API response received:", response);
+
+		if (response && response.success) {
+			showStatusMessage("Invoice created successfully!", "success");
+
+			// Close modal after a brief delay
+			setTimeout(() => {
+				handleClose();
+			}, 1500);
+		} else {
+			throw new Error(response?.message || "Failed to create invoice");
+		}
+	} catch (error) {
+		console.error("CreateInvoiceModal: Error creating invoice:", error);
+		showStatusMessage(error.message || "Failed to create invoice. Please try again.", "error");
+	} finally {
+		isSubmitting.value = false;
+		// Also reset the Form component's internal submission state
+		if (formRef.value && formRef.value.stopLoading) {
+			formRef.value.stopLoading();
+		}
+		console.log("CreateInvoiceModal: Form submission completed, isSubmitting reset to false");
+	}
+}
+
+// Handle cancel action
+function handleCancel() {
+	handleClose();
+}
+
+// Handle modal close
+function handleClose() {
+	modalStore.closeModal("createInvoice");
+	resetForm();
+}
+
+// Handle visibility changes
+function handleVisibilityChange(visible) {
+	if (!visible) {
+		handleClose();
+	}
+}
+
+// Reset form data
+function resetForm() {
+	Object.keys(formData).forEach((key) => {
+		formData[key] = "";
+	});
+	availableCities.value = [];
+	isLoadingZipcode.value = false;
+	statusMessage.value = "";
+	statusType.value = "info";
+}
+
+// Initialize modal in store when component mounts
+modalStore.initializeModal("createInvoice", {
+	closeOnEscape: true,
+	closeOnOutsideClick: true,
+});
+
+watch(isVisible, async () => {
+	if (isVisible.value) {
+		try {
+			const names = await Api.getCustomerNames();
+			customerNames.value = names;
+		} catch (error) {
+			console.error("Error loading customer names:", error);
+		}
+		try {
+			const names = await Api.getCompanyNames();
+			companyNames.value = names;
+		} catch (error) {
+			console.error("Error loading company names:", error);
+		}
+	}
+});
+</script>
+
+<style scoped>
+.create-invoice-modal {
+	border-radius: 12px;
+}
+
+/* Custom styling for the modal content */
+:deep(.modal-header) {
+	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+	color: white;
+}
+
+:deep(.modal-title) {
+	font-weight: 600;
+	font-size: 1.25rem;
+}
+
+:deep(.modal-close-btn) {
+	color: white !important;
+}
+
+:deep(.modal-content) {
+	padding: 24px;
+}
+
+/* Status message styling */
+.status-message {
+	padding: 12px 16px;
+	margin-bottom: 16px;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	font-size: 0.9rem;
+	border-left: 4px solid;
+}
+
+.status-icon {
+	margin-right: 8px;
+	font-size: 1rem;
+}
+
+.status-info {
+	background-color: #e3f2fd;
+	color: #1565c0;
+	border-left-color: #2196f3;
+}
+
+.status-warning {
+	background-color: #fff3e0;
+	color: #ef6c00;
+	border-left-color: #ff9800;
+}
+
+.status-error {
+	background-color: #ffebee;
+	color: #c62828;
+	border-left-color: #f44336;
+}
+
+.status-success {
+	background-color: #e8f5e8;
+	color: #2e7d32;
+	border-left-color: #4caf50;
+}
+</style>