create form and modal components, update datatable persistant filtering

frontend/src/api.js

@@ -1,6 +1,32 @@
 import DataUtils from "./utils";
+import axios from "axios";
+
+const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
 
 class Api {
+
+	static async request(url, method = "get", data = {}) {
+		try {
+			const response = await axios({
+				url,
+				method,
+				data,
+				withCredentials: false,
+				timeout: 10000, // 10 second timeout
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json'
+				}
+			})
+			console.log("DEBUG: API - Request Response: ", response.data);
+			return response.data;
+		} catch (error) {
+			console.error("DEBUG: API - Request Error: ", error);
+			// Re-throw the error so calling code can handle it
+			throw error;
+		}
+	}
+
 	static async getClientDetails() {
 		// const data = [];
 		// const addresses = await this.getDocsList("Address");
@@ -51,17 +77,65 @@ class Api {
 		return data;
 	}
 
+	/**
+	 * Fetch a list of documents from a specific doctype.
+	 *
+	 * @param {String} doctype 
+	 * @param {string[]} fields 
+	 * @returns {Promise<Object[]>}
+	 */
 	static async getDocsList(doctype, fields = []) {
 		const docs = await frappe.db.get_list(doctype, { fields });
 		console.log(`DEBUG: API - Fetched ${doctype} list: `, docs);
 		return docs;
 	}
 
+	/**
+	 * Fetch a detailed document by doctype and name.
+	 *
+	 * @param {String} doctype 
+	 * @param {String} name 
+	 * @returns {Promise<Object>}
+	 */
 	static async getDetailedDoc(doctype, name) {
 		const doc = await frappe.db.get_doc(doctype, name);
 		console.log(`DEBUG: API - Fetched Detailed ${doctype}: `, doc);
 		return doc;
 	}
+
+	/**
+	 * Fetch a list of places (city/state) by zipcode using Zippopotamus API.
+	 * 
+	 * @param {String} zipcode
+	 * @returns {Promise<Object[]>}
+	 */
+	static async getCityStateByZip(zipcode) {
+		const url = `${ZIPPOPOTAMUS_BASE_URL}/${zipcode}`;
+		try {
+			const response = await this.request(url);
+			const { places } = response || {};
+			
+			if (!places || places.length === 0) {
+				throw new Error(`No location data found for zip code ${zipcode}`);
+			}
+			
+			return places;
+		} catch (error) {
+			console.error("DEBUG: API - getCityStateByZip Error: ", error);
+			
+			// Provide more specific error information
+			if (error.code === 'ERR_NETWORK') {
+				throw new Error('Network error: Unable to connect to location service. This may be due to CORS restrictions or network connectivity issues.');
+			} else if (error.response?.status === 404) {
+				throw new Error(`Zip code ${zipcode} not found in database.`);
+			} else if (error.code === 'ECONNABORTED') {
+				throw new Error('Request timeout: Location service is taking too long to respond.');
+			}
+			
+			// Re-throw the original error if we can't categorize it
+			throw error;
+		}
+	}
 }
 
 export default Api;