Added the functional Estimates page showing the list of estimates in the system.

custom_ui/api/db/estimates.py

@@ -1,10 +1,52 @@
 import frappe, json
-from custom_ui.db_utils import process_query_conditions, build_datatable_response, get_count_or_filters
+from custom_ui.db_utils import process_query_conditions, build_datatable_dict, get_count_or_filters, build_success_response
 
 # ===============================================================================
 # ESTIMATES & INVOICES API METHODS
 # ===============================================================================
 
+
+@frappe.whitelist()
+def get_estimate_table_data(filters={}, sortings=[], page=1, page_size=10):
+    """Get paginated estimate table data with filtering and sorting support."""
+    print("DEBUG: Raw estimate options received:", filters, sortings, page, page_size)
+
+    processed_filters, processed_sortings, is_or, page, page_size = process_query_conditions(filters, sortings, page, page_size)
+
+    if is_or:
+        count = frappe.db.sql(*get_count_or_filters("Quotation", processed_filters))[0][0]
+    else:
+        count = frappe.db.count("Quotation", filters=processed_filters)
+
+    print(f"DEBUG: Number of estimates returned: {count}")
+
+    estimates = frappe.db.get_all(
+        "Quotation",
+        fields=["*"],
+        filters=processed_filters if not is_or else None,
+        or_filters=processed_filters if is_or else None,
+        limit=page_size,
+        start=(page - 1) * page_size,
+        order_by=processed_sortings
+    )
+
+    tableRows = []
+    for estimate in estimates:
+        tableRow = {}
+        tableRow["id"] = estimate["name"]
+        tableRow["name"] = estimate["name"]
+        tableRow["quotation_to"] = estimate.get("quotation_to", "")
+        tableRow["customer"] = estimate.get("party_name", "")
+        tableRow["status"] = estimate.get("custom_current_status", "")
+        tableRow["date"] = estimate.get("transaction_date", "")
+        tableRow["order_type"] = estimate.get("order_type", "")
+        tableRow["items"] = estimate.get("items", "")
+        tableRows.append(tableRow)
+
+    table_data_dict = build_datatable_dict(data=tableRows, count=count, page=page, page_size=page_size)
+    return build_success_response(table_data_dict)
+
+
 @frappe.whitelist()
 def upsert_estimate(data):
     """Create or update an estimate."""
@@ -16,4 +58,4 @@ def upsert_estimate(data):
 def upsert_invoice(data):
     """Create or update an invoice."""
     # TODO: Implement invoice creation/update logic
-    pass
+    pass

frontend/src/api.js

@@ -6,6 +6,7 @@ const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
 const FRAPPE_PROXY_METHOD = "custom_ui.api.proxy.request";
 // Estimate methods
 const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.estimates.upsert_estimate";
+const FRAPPE_GET_ESTIMATES_METHOD = "custom_ui.api.db.estimates.get_estimate_table_data";
 // Job methods
 const FRAPPE_GET_JOBS_METHOD = "custom_ui.api.db.get_jobs";
 const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.jobs.upsert_job";
@@ -178,6 +179,31 @@ class Api {
 		return result;
 	}
 
+	static async getPaginatedEstimateDetails(paginationParams = {}, filters = {}, sorting = null) {
+		const { page = 0, pageSize = 10, sortField = null, sortOrder = null } = paginationParams;
+
+		// Use sorting from the dedicated sorting parameter first, then fall back to pagination params
+		const actualSortField = sorting?.field || sortField;
+		const actualSortOrder = sorting?.order || sortOrder;
+
+		const options = {
+			page: page + 1, // Backend expects 1-based pages
+			page_size: pageSize,
+			filters,
+			sorting:
+				actualSortField && actualSortOrder
+					? `${actualSortField} ${actualSortOrder === -1 ? "desc" : "asc"}`
+					: null,
+			for_table: true,
+		};
+
+		console.log("DEBUG: API - Sending estimate options to backend:", options);
+
+		const result = await this.request(FRAPPE_GET_ESTIMATES_METHOD, { options });
+		return result;
+
+	}
+
 	/**
 	 * Get paginated job data with filtering and sorting
 	 * @param {Object} paginationParams - Pagination parameters from store

frontend/src/components/pages/Estimates.vue

@@ -0,0 +1,172 @@
+<template>
+	<div>
+		<h2>Estimates</h2>
+		<DataTable
+			:data="tableData"
+			:columns="columns"
+			tableName="estimates"
+			:lazy="true"
+			:totalRecords="totalRecords"
+			:loading="isLoading"
+			@lazy-load="handleLazyLoad"
+		/>
+	</div>
+</template>
+<script setup>
+import DataTable from "../common/DataTable.vue";
+import { ref, onMounted } from "vue";
+import Api from "../../api";
+import { useLoadingStore } from "../../stores/loading";
+import { usePaginationStore } from "../../stores/pagination";
+import { useFiltersStore } from "../../stores/filters";
+
+const loadingStore = useLoadingStore();
+const paginationStore = usePaginationStore();
+const filtersStore = useFiltersStore();
+
+const tableData = ref([]);
+const totalRecords = ref(0);
+const isLoading = ref(false);
+
+const columns = [
+	{ label: "Estimate ID", fieldName: "name", type: "text", sortable: true, filterable: true },
+	//{ label: "Address", fieldName: "customInstallationAddress", type: "text", sortable: true },
+	{ label: "Customer", fieldName: "customer", type: "text", sortable: true, filterable: true },
+	{ label: "Status", fieldName: "status", type: "status", sortable: true },
+	{ label: "Order Type", fieldName: "orderType", type: "text", sortable: true },
+	//{ label: "Estimate Amount", fieldName:
+];
+
+const handleLazyLoad = async (event) => {
+	console.log("Estimates page - handling lazy load:", event);
+
+	try {
+		isLoading.value = true;
+
+		// Get sorting information from filters store first (needed for cache key)
+		const sorting = filtersStore.getTableSorting("estimates");
+		console.log("Current sorting state:", sorting);
+
+		// Get pagination parameters
+		const paginationParams = {
+			page: event.page || 0,
+			pageSize: event.rows || 10,
+			sortField: event.sortField,
+			sortOrder: event.sortOrder,
+		};
+
+		// Get filters (convert PrimeVue format to API format)
+		const filters = {};
+		if (event.filters) {
+			Object.keys(event.filters).forEach((key) => {
+				if (key !== "global" && event.filters[key] && event.filters[key].value) {
+					filters[key] = event.filters[key];
+				}
+			});
+		}
+
+		// Clear cache when filters or sorting are active to ensure fresh data
+		const hasActiveFilters = Object.keys(filters).length > 0;
+		const hasActiveSorting = paginationParams.sortField && paginationParams.sortOrder;
+		if (hasActiveFilters || hasActiveSorting) {
+			paginationStore.clearTableCache("estimates");
+		}
+
+		// Check cache first
+		const cachedData = paginationStore.getCachedPage(
+			"estimates",
+			paginationParams.page,
+			paginationParams.pageSize,
+			sorting.field || paginationParams.sortField,
+			sorting.order || paginationParams.sortOrder,
+			filters,
+		);
+
+		if (cachedData) {
+			// Use cached data
+			tableData.value = cachedData.records;
+			totalRecords.value = cachedData.totalRecords;
+			paginationStore.setTotalRecords("estimates", cachedData.totalRecords);
+
+			console.log("Loaded from cache:", {
+				records: cachedData.records.length,
+				total: cachedData.totalRecords,
+				page: paginationParams.page + 1,
+			});
+			return;
+		}
+
+		console.log("Making API call with:", { paginationParams, filters });
+
+		// Call API with pagination, filters, and sorting
+		const result = await Api.getPaginatedEstimateDetails(paginationParams, filters, sorting);
+
+		console.log("DEBUG: Result from api:", result);
+
+		// Update local state - extract from pagination structure
+		tableData.value = result.data;
+		totalRecords.value = result.pagination.total;
+
+		// Update pagination store with new total
+		paginationStore.setTotalRecords("estimates", result.pagination.total);
+
+		console.log("Updated pagination state:", {
+			tableData: tableData.value.length,
+			totalRecords: totalRecords.value,
+			storeTotal: paginationStore.getTablePagination("estimates").totalRecords,
+			storeTotalPages: paginationStore.getTotalPages("estimates"),
+		});
+
+		// Cache the result
+		paginationStore.setCachedPage(
+			"estimates",
+			paginationParams.page,
+			paginationParams.pageSize,
+			sorting.field || paginationParams.sortField,
+			sorting.order || paginationParams.sortOrder,
+			filters,
+			{
+				records: result.data,
+				totalRecords: result.pagination.total,
+			},
+		);
+
+		console.log("Loaded from API:", {
+			records: result.data.length,
+			total: result.pagination.total,
+			page: paginationParams.page + 1,
+		});
+	} catch (error) {
+		console.error("Error loading estimate data:", error);
+		// You could also show a toast or other error notification here
+		tableData.value = [];
+		totalRecords.value = 0;
+	} finally {
+		isLoading.value = false;
+	}
+};
+
+// Load initial data
+onMounted(async () => {
+	// Initialize pagination and filters
+	paginationStore.initializeTablePagination("estimates", { rows: 10 });
+	filtersStore.initializeTableFilters("estimates", columns);
+	filtersStore.initializeTableSorting("estimates");
+
+	// Load first page
+	const initialPagination = paginationStore.getTablePagination("estimates");
+	const initialFilters = filtersStore.getTableFilters("estimates");
+	const initialSorting = filtersStore.getTableSorting("estimates");
+
+	await handleLazyLoad({
+		page: initialPagination.page,
+		rows: initialPagination.rows,
+		first: initialPagination.first,
+		sortField: initialSorting.field || initialPagination.sortField,
+		sortOrder: initialSorting.order || initialPagination.sortOrder,
+		filters: initialFilters,
+	});
+});
+
+</script>
+<style lang=""></style>

frontend/src/router.js

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import Calendar from "./components/pages/Calendar.vue";
 import Clients from "./components/pages/Clients.vue";
 import Jobs from "./components/pages/Jobs.vue";
+import Estimates from "./components/pages/Estimates.vue";
 import Create from "./components/pages/Create.vue";
 import Routes from "./components/pages/Routes.vue";
 import TimeSheets from "./components/pages/TimeSheets.vue";
@@ -23,6 +24,7 @@ const routes = [
 	{ path: "/client", component: Client },
 	{ path: "/schedule-onsite", component: ScheduleOnSite },
 	{ path: "/jobs", component: Jobs },
+	{ path: "/estimates", component: Estimates },
 	{ path: "/routes", component: Routes },
 	{ path: "/create", component: Create },
 	{ path: "/timesheets", component: TimeSheets },

frontend/src/stores/pagination.js

@@ -20,6 +20,14 @@ export const usePaginationStore = defineStore("pagination", {
 				sortField: null,
 				sortOrder: null,
 			},
+			estimates: {
+				first: 0,
+				page: 0,
+				rows: 10,
+				totalRecords: 0,
+				sortField: null,
+				sortOrder: null,
+			},
 			timesheets: {
 				first: 0,
 				page: 0,