Added Estimate Modal and solved some merge conflicts.

custom_ui/api/db.py

@@ -15,10 +15,10 @@ def get_clients(options):
     }
     options = {**defaultOptions, **options}
     print("DEBUG: Final options:", options)
-    
+
     clients = []
     tableRows = []
-    
+
     # Map frontend field names to backend field names
     def map_field_name(frontend_field):
         field_mapping = {
@@ -26,11 +26,11 @@ def get_clients(options):
             "addressName": "address_title",  # Legacy support
             "appointmentScheduledStatus": "address_title",  # These are computed fields, sort by address_title
             "estimateSentStatus": "address_title",
-            "paymentReceivedStatus": "address_title", 
+            "paymentReceivedStatus": "address_title",
             "jobStatus": "address_title"
         }
         return field_mapping.get(frontend_field, frontend_field)
-    
+
     # Process filters from PrimeVue format to Frappe format
     processed_filters = {}
     if options["filters"]:
@@ -39,12 +39,12 @@ def get_clients(options):
                 if filter_obj["value"] is not None and filter_obj["value"] != "":
                     # Map frontend field names to backend field names
                     backend_field = map_field_name(field_name)
-                    
+
                     # Handle different match modes
                     match_mode = filter_obj.get("matchMode", "contains")
                     if isinstance(match_mode, str):
                         match_mode = match_mode.lower()
-                    
+
                     if match_mode in ("contains", "contains"):
                         processed_filters[backend_field] = ["like", f"%{filter_obj['value']}%"]
                     elif match_mode in ("startswith", "startsWith"):
@@ -56,7 +56,7 @@ def get_clients(options):
                     else:
                         # Default to contains
                         processed_filters[backend_field] = ["like", f"%{filter_obj['value']}%"]
-    
+
     # Process sorting
     order_by = None
     if options.get("sorting") and options["sorting"]:
@@ -70,71 +70,71 @@ def get_clients(options):
                 # Map frontend field to backend field
                 backend_sort_field = map_field_name(sort_field)
                 order_by = f"{backend_sort_field} {sort_direction}"
-    
+
     print("DEBUG: Processed filters:", processed_filters)
     print("DEBUG: Order by:", order_by)
-    
+
     count = frappe.db.count("Address", filters=processed_filters)
     print("DEBUG: Total addresses count:", count)
-    
+
     addresses = frappe.db.get_all(
-        "Address", 
+        "Address",
-        fields=options["fields"], 
+        fields=options["fields"],
         filters=processed_filters,
         limit=options["page_size"],
         start=(options["page"] - 1) * options["page_size"],
         order_by=order_by
     )
-    
+
     for address in addresses:
         client = {}
         tableRow = {}
-        
+
         on_site_meetings = frappe.db.get_all(
             "On-Site Meeting",
             fields=["*"],
             filters={"address": address["address_title"]}
         )
-        
+
         quotations = frappe.db.get_all(
             "Quotation",
             fields=["*"],
             filters={"custom_installation_address": address["address_title"]}
         )
-        
+
         sales_orders = frappe.db.get_all(
             "Sales Order",
             fields=["*"],
             filters={"custom_installation_address": address["address_title"]}
         )
-        
+
         sales_invvoices = frappe.db.get_all(
             "Sales Invoice",
             fields=["*"],
             filters={"custom_installation_address": address["address_title"]}
         )
-        
+
         payment_entries = frappe.db.get_all(
             "Payment Entry",
             fields=["*"],
             filters={"custom_installation_address": address["address_title"]}
         )
-        
+
         jobs = frappe.db.get_all(
             "Project",
             fields=["*"],
             filters={
-                "custom_installation_address": address["address_title"], 
+                "custom_installation_address": address["address_title"],
                 "project_template": "SNW Install"
             }
         )
-        
+
         tasks = frappe.db.get_all(
-            "Task", 
+            "Task",
-            fields=["*"], 
+            fields=["*"],
             filters={"project": jobs[0]["name"]}
         ) if jobs else []
-         
+
         tableRow["id"] = address["name"]
         tableRow["address_title"] = address["address_title"]
         tableRow["appointment_scheduled_status"] = calculate_appointment_scheduled_status(on_site_meetings[0]) if on_site_meetings else "Not Started"
@@ -142,13 +142,13 @@ def get_clients(options):
         tableRow["payment_received_status"] = calculate_payment_recieved_status(sales_invvoices[0], payment_entries) if sales_invvoices and payment_entries else "Not Started"
         tableRow["job_status"] = calculate_job_status(jobs[0], tasks) if jobs and tasks else "Not Started"
         tableRows.append(tableRow)
-        
+
         client["address"] = address
         client["on_site_meetings"] = on_site_meetings
         client["jobs"] = jobs
         client["quotations"] = quotations
         clients.append(client)
-        
+
     return {
         "pagination": {
             "total": count,
@@ -220,10 +220,10 @@ def get_jobs(options):
     }
     options = {**defaultOptions, **options}
     print("DEBUG: Final job options:", options)
-    
+
     jobs = []
     tableRows = []
-    
+
     # Map frontend field names to backend field names for Project doctype
     def map_job_field_name(frontend_field):
         field_mapping = {
@@ -234,7 +234,7 @@ def get_jobs(options):
             "percentComplete": "percent_complete"
         }
         return field_mapping.get(frontend_field, frontend_field)
-    
+
     # Process filters from PrimeVue format to Frappe format
     processed_filters = {}
     if options["filters"]:
@@ -243,12 +243,12 @@ def get_jobs(options):
                 if filter_obj["value"] is not None and filter_obj["value"] != "":
                     # Map frontend field names to backend field names
                     backend_field = map_job_field_name(field_name)
-                    
+
                     # Handle different match modes
                     match_mode = filter_obj.get("matchMode", "contains")
                     if isinstance(match_mode, str):
                         match_mode = match_mode.lower()
-                    
+
                     if match_mode in ("contains", "contains"):
                         processed_filters[backend_field] = ["like", f"%{filter_obj['value']}%"]
                     elif match_mode in ("startswith", "startsWith"):
@@ -260,7 +260,7 @@ def get_jobs(options):
                     else:
                         # Default to contains
                         processed_filters[backend_field] = ["like", f"%{filter_obj['value']}%"]
-    
+
     # Process sorting
     order_by = None
     if options.get("sorting") and options["sorting"]:
@@ -274,26 +274,26 @@ def get_jobs(options):
                 # Map frontend field to backend field
                 backend_sort_field = map_job_field_name(sort_field)
                 order_by = f"{backend_sort_field} {sort_direction}"
-    
+
     print("DEBUG: Processed job filters:", processed_filters)
     print("DEBUG: Job order by:", order_by)
-    
+
     count = frappe.db.count("Project", filters=processed_filters)
     print("DEBUG: Total projects count:", count)
-    
+
     projects = frappe.db.get_all(
-        "Project", 
+        "Project",
-        fields=options["fields"], 
+        fields=options["fields"],
         filters=processed_filters,
         limit=options["page_size"],
         start=(options["page"] - 1) * options["page_size"],
         order_by=order_by
     )
-    
+
     for project in projects:
         job = {}
         tableRow = {}
-         
+
         tableRow["id"] = project["name"]
         tableRow["name"] = project["name"]
         tableRow["customInstallationAddress"] = project.get("custom_installation_address", "")
@@ -301,10 +301,10 @@ def get_jobs(options):
         tableRow["status"] = project.get("status", "")
         tableRow["percentComplete"] = project.get("percent_complete", 0)
         tableRows.append(tableRow)
-        
+
         job["project"] = project
         jobs.append(job)
-        
+
     return {
         "pagination": {
             "total": count,
@@ -313,4 +313,8 @@ def get_jobs(options):
             "total_pages": (count + options["page_size"] - 1) // options["page_size"]
         },
         "data": tableRows if options["for_table"] else jobs
-    }
+    }
+
+@frappe.whitelist()
+def upsert_estimate():
+    pass

frontend/src/App.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { IconoirProvider } from "@iconoir/vue";
 import SideBar from "./components/SideBar.vue";
-import CreateClientModal from "./components/modals/CreatClientModal.vue";
+import CreateClientModal from "./components/modals/CreateClientModal.vue";
+import CreateEstimateModal from "./components/modals/CreateEstimateModal.vue";
 import GlobalLoadingOverlay from "./components/common/GlobalLoadingOverlay.vue";
 import ScrollPanel from "primevue/scrollpanel";
 </script>
@@ -26,6 +27,7 @@ import ScrollPanel from "primevue/scrollpanel";
 
 		<!-- Global Modals -->
 		<CreateClientModal />
+		<CreateEstimateModal />
 
 		<!-- Global Loading Overlay -->
 		<GlobalLoadingOverlay />

frontend/src/api.js

@@ -233,8 +233,9 @@ class Api {
 				customer: timesheet.customer,
 				totalHours: timesheet.total_hours,
 				status: timesheet.status,
-				totalPayFormatted: timesheet.total_costing_amount,
+				totalPay: timesheet.total_costing_amount
-			};
+			}
+			console.log("Timesheet Row: ", tableRow);
 			data.push(tableRow);
 		}
 		console.log("DEBUG: API - getTimesheetData result: ", data);
@@ -311,7 +312,7 @@ class Api {
 	 * @param {Object} filters
 	 * @returns {Promise<Object[]>}
 	 */
-	static async getDocsList(doctype, fields = [], filters = {}, page = 0, pageLength = 0) {
+	static async getDocsList(doctype, fields = [], filters = {}, page = 0, start=0, pageLength = 0) {
 		const docs = await frappe.db.get_list(doctype, {
 			fields,
 			filters,
@@ -361,6 +362,12 @@ class Api {
 		return customerNames;
 	}
 
+	static async getCompanyNames() {
+		const companies = await this.getDocsList("Company", ["name"]);
+		console.log("DEBUG: API - Fetched Company Names: ", companyNames);
+		return companyNames;
+	}
+
 	// Create methods
 
 	static async createClient(clientData) {

frontend/src/components/SideBar.vue

@@ -46,7 +46,8 @@ const createButtons = ref([
 	{
 		label: "Estimate",
 		command: () => {
-			frappe.new_doc("Estimate");
+			//frappe.new_doc("Estimate");
+			modalStore.openModal("createEstimate");
 		},
 	},
 	{

frontend/src/components/modals/CreateEstimateModal.vue

@@ -0,0 +1,328 @@
+<template>
+	<Modal
+		:visible="isVisible"
+		:options="modalOptions"
+		@update:visible="handleVisibilityChange"
+		@close="handleClose"
+	>
+		<template #title> Create New Estimate </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 Client"
+			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("createEstimate"));
+const companyNames = ref([]);
+// Form reference for controlling its state
+const formRef = ref(null);
+// Form data
+const formData = reactive({
+	address: "",
+	company: "",
+	date: "",
+	quotationTo: "",
+	partyName: "",
+	items: "",
+});
+
+// Available cities for the selected zipcode
+const availableCities = ref([]);
+
+// Loading state for zipcode lookup
+const isLoadingZipcode = ref(false);
+
+// 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 Estimate",
+	overlayColor: "rgb(59, 130, 246)", // Blue background
+	overlayOpacity: 0.8,
+	cardClass: "create-estimate-modal",
+	closeOnOutsideClick: true,
+	closeOnEscape: true,
+};
+
+// Form field definitions
+const formFields = computed(() => [
+	{
+		name: "address",
+		label: "Client Address",
+		type: "text",
+		required: true,
+		placeholder: "Enter street address",
+		cols: 12,
+		md: 6,
+		helpText: "Enter address for this estimate",
+	},
+	{
+		name: "company",
+		label: "Company Name",
+		type: "select", // Changed from 'select' to 'autocomplete'
+		required: true,
+		placeholder: "Select Company",
+		cols: 12,
+		md: 6,
+		options: companyNames.value, // Direct array of strings
+		dropdown: true,
+		// For string arrays, don't set optionLabel at all
+		helpText: "Select company associated with this estimate.",
+		// Let the Form component handle filtering automatically
+	},
+	{
+		name: "date",
+		label: "Current Date",
+		type: "date",
+		required: true,
+		placeholder: "",
+		cols: 12,
+		md: 6,
+	},
+	{
+		name: "quotationTo",
+		label: "Client Type",
+		type: "select",
+		required: true,
+		placeholder: "Select Customer or Business",
+		cols: 12,
+		md: 6,
+		options: ["Customer", "Business"]
+	},
+	{
+		name: "partyName",
+		label: "Client Name",
+		type: "text",
+		required: true,
+		placeholder: "",
+		cols: 12,
+		md: 4,
+	},
+]);
+
+
+// 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(
+			"CreateEstimateModal: Form submission already in progress, ignoring duplicate submission",
+		);
+		return;
+	}
+
+	console.log(
+		"CreateEstimateModal: Form submission started with data:",
+		formDataFromEvent || formData,
+	);
+
+	isSubmitting.value = true;
+
+	try {
+		showStatusMessage("Creating estimate...", "info");
+
+		// Use the form data from the event if provided, otherwise use reactive formData
+		const dataToSubmit = formDataFromEvent || formData;
+
+		console.log("CreateEstimateModal: Calling API with data:", dataToSubmit);
+
+		// Call API to create client
+		const response = await Api.createEstimate(dataToSubmit);
+
+		console.log("CreateEstimateModal: API response received:", response);
+
+		if (response && response.success) {
+			showStatusMessage("Estimate created successfully!", "success");
+
+			// Close modal after a brief delay
+			setTimeout(() => {
+				handleClose();
+			}, 1500);
+		} else {
+			throw new Error(response?.message || "Failed to create estimate");
+		}
+	} catch (error) {
+		console.error("CreateEstimateModal: Error creating client:", error);
+		showStatusMessage(error.message || "Failed to create estimate. 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("CreateEstimateModal: Form submission completed, isSubmitting reset to false");
+	}
+}
+
+// Handle cancel action
+function handleCancel() {
+	handleClose();
+}
+
+// Handle modal close
+function handleClose() {
+	modalStore.closeModal("createEstimate");
+	resetForm();
+}
+
+// Handle visibility changes
+function handleVisibilityChange(visible) {
+	if (!visible) {
+		handleClose();
+	}
+}
+
+// Reset form data
+function resetForm() {
+	Object.keys(formData).forEach((key) => {
+		formData[key] = "";
+	});
+	statusMessage.value = "";
+	statusType.value = "info";
+}
+
+// Initialize modal in store when component mounts
+modalStore.initializeModal("createEstimate", {
+	closeOnEscape: true,
+	closeOnOutsideClick: true,
+});
+
+watch(isVisible, async () => {
+	if (isVisible.value) {
+		try {
+			const names = await Api.getCompanyNames();
+			companyNames.value = names;
+		} catch (error) {
+			console.error("Error loading company names:", error);
+		}
+	}
+});
+</script>
+
+<style scoped>
+.create-client-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>