add notifiaction handling, error handling

frontend/src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { IconoirProvider } from "@iconoir/vue";
 import SideBar from "./components/SideBar.vue";
 import CreateClientModal from "./components/modals/CreateClientModal.vue";
@@ -8,6 +9,19 @@ import CreateInvoiceModal from "./components/modals/CreateInvoiceModal.vue";
 import CreateWarrantyModal from "./components/modals/CreateWarrantyModal.vue";
 import GlobalLoadingOverlay from "./components/common/GlobalLoadingOverlay.vue";
 import ScrollPanel from "primevue/scrollpanel";
+import Toast from "primevue/toast";
+import { useNotificationStore } from "@/stores/notifications-primevue";
+
+// Get the notification store and create a ref for the toast
+const notificationStore = useNotificationStore();
+const toast = ref();
+
+// Connect the toast instance to the store when component mounts
+onMounted(() => {
+	if (toast.value) {
+		notificationStore.setToastInstance(toast.value);
+	}
+});
 </script>
 
 <template>
@@ -37,6 +51,9 @@ import ScrollPanel from "primevue/scrollpanel";
 
 		<!-- Global Loading Overlay -->
 		<GlobalLoadingOverlay />
+
+		<!-- Global Notifications -->
+		<Toast ref="toast" />
 	</IconoirProvider>
 </template>
 

frontend/src/api-enhanced.js

@@ -0,0 +1,265 @@
+/**
+ * Enhanced API wrapper with integrated error handling and notifications
+ *
+ * This example shows how to use the error store and notification system together
+ * to provide comprehensive error handling and user feedback for API calls.
+ */
+
+import { useErrorStore } from "@/stores/errors";
+import { useNotificationStore } from "@/stores/notifications";
+import { useLoadingStore } from "@/stores/loading";
+import Api from "./api";
+
+export class ApiWithErrorHandling {
+	static async makeApiCall(apiFunction, options = {}) {
+		const {
+			// Error handling options
+			componentName = null,
+			showErrorNotifications = true,
+			showSuccessNotifications = true,
+
+			// Loading options
+			showLoading = true,
+			loadingMessage = "Loading...",
+
+			// Success options
+			successMessage = null,
+			successTitle = "Success",
+
+			// Error options
+			errorTitle = "Error",
+			customErrorMessage = null,
+
+			// Retry options
+			retryCount = 0,
+			retryDelay = 1000,
+
+			// Operation identifier for tracking
+			operationKey = null,
+		} = options;
+
+		const errorStore = useErrorStore();
+		const notificationStore = useNotificationStore();
+		const loadingStore = useLoadingStore();
+
+		// Generate operation key if not provided
+		const operation = operationKey || `api-${Date.now()}`;
+
+		try {
+			// Clear any existing errors
+			if (componentName) {
+				errorStore.clearComponentError(componentName);
+			}
+
+			// Show loading state
+			if (showLoading) {
+				if (componentName) {
+					loadingStore.setComponentLoading(componentName, true, loadingMessage);
+				} else {
+					loadingStore.startOperation(operation, loadingMessage);
+				}
+			}
+
+			// Make the API call with retry logic
+			const result = await errorStore.handleApiCall(operation, apiFunction, {
+				showNotification: showErrorNotifications,
+				retryCount,
+				retryDelay,
+			});
+
+			// Show success notification
+			if (showSuccessNotifications && successMessage) {
+				notificationStore.addSuccess(successMessage, successTitle);
+			}
+
+			return result;
+		} catch (error) {
+			// The error store has already handled the error notification
+			// But we can add custom handling here if needed
+			console.error("API call failed:", error);
+
+			// Optionally show a custom error message
+			if (customErrorMessage && !showErrorNotifications) {
+				notificationStore.addError(customErrorMessage, errorTitle);
+			}
+
+			// Re-throw the error so calling code can handle it if needed
+			throw error;
+		} finally {
+			// Always clear loading state
+			if (showLoading) {
+				if (componentName) {
+					loadingStore.setComponentLoading(componentName, false);
+				} else {
+					loadingStore.stopOperation(operation);
+				}
+			}
+		}
+	}
+
+	// Convenience methods for common API operations
+	static async getClientStatusCounts(options = {}) {
+		return this.makeApiCall(() => Api.getClientStatusCounts(), {
+			operationKey: "client-status-counts",
+			componentName: "clients",
+			loadingMessage: "Loading client status data...",
+			successMessage: null, // Don't show success for data fetches
+			...options,
+		});
+	}
+
+	static async getPaginatedClientDetails(paginationParams, filters, sorting, options = {}) {
+		return this.makeApiCall(
+			() => Api.getPaginatedClientDetails(paginationParams, filters, sorting),
+			{
+				operationKey: "client-table-data",
+				componentName: "dataTable",
+				loadingMessage: "Loading client data...",
+				successMessage: null, // Don't show success for data fetches
+				...options,
+			},
+		);
+	}
+
+	static async createClient(clientData, options = {}) {
+		return this.makeApiCall(() => Api.createClient(clientData), {
+			operationKey: "create-client",
+			componentName: "form",
+			loadingMessage: "Creating client...",
+			successMessage: "Client created successfully!",
+			errorTitle: "Failed to Create Client",
+			...options,
+		});
+	}
+
+	static async getPaginatedJobDetails(paginationParams, filters, sorting, options = {}) {
+		return this.makeApiCall(
+			() => Api.getPaginatedJobDetails(paginationParams, filters, sorting),
+			{
+				operationKey: "job-table-data",
+				componentName: "jobs",
+				loadingMessage: "Loading job data...",
+				successMessage: null,
+				...options,
+			},
+		);
+	}
+
+	static async getPaginatedWarrantyData(paginationParams, filters, sorting, options = {}) {
+		return this.makeApiCall(
+			() => Api.getPaginatedWarrantyData(paginationParams, filters, sorting),
+			{
+				operationKey: "warranty-table-data",
+				componentName: "warranties",
+				loadingMessage: "Loading warranty data...",
+				successMessage: null,
+				...options,
+			},
+		);
+	}
+
+	static async getCityStateByZip(zipcode, options = {}) {
+		return this.makeApiCall(() => Api.getCityStateByZip(zipcode), {
+			operationKey: "zip-lookup",
+			componentName: "form",
+			loadingMessage: "Looking up location...",
+			successMessage: null,
+			errorTitle: "Zip Code Lookup Failed",
+			customErrorMessage: "Unable to find location for the provided zip code",
+			retryCount: 2,
+			retryDelay: 1000,
+			...options,
+		});
+	}
+}
+
+/**
+ * Example usage in Vue components:
+ *
+ * <script setup>
+ * import { ref, onMounted } from 'vue';
+ * import { ApiWithErrorHandling } from '@/api-enhanced';
+ * import { useErrorStore } from '@/stores/errors';
+ * import { useNotificationStore } from '@/stores/notifications';
+ *
+ * const errorStore = useErrorStore();
+ * const notificationStore = useNotificationStore();
+ *
+ * const clientData = ref([]);
+ * const pagination = ref({ page: 0, pageSize: 10 });
+ * const filters = ref({});
+ *
+ * // Example 1: Basic API call with automatic error handling
+ * const loadClientData = async () => {
+ *   try {
+ *     const result = await ApiWithErrorHandling.getPaginatedClientDetails(
+ *       pagination.value,
+ *       filters.value,
+ *       []
+ *     );
+ *     clientData.value = result.data;
+ *   } catch (error) {
+ *     // Error has already been handled by the error store and notifications shown
+ *     // This catch block is optional - you only need it if you want custom handling
+ *     console.log('Failed to load client data, but user has been notified');
+ *   }
+ * };
+ *
+ * // Example 2: API call with custom options
+ * const createNewClient = async (formData) => {
+ *   try {
+ *     await ApiWithErrorHandling.createClient(formData, {
+ *       componentName: 'createClientForm',
+ *       successMessage: 'New client added successfully!',
+ *       errorTitle: 'Client Creation Failed',
+ *       customErrorMessage: 'There was an issue creating the client. Please try again.',
+ *       retryCount: 1
+ *     });
+ *
+ *     // Refresh data after successful creation
+ *     await loadClientData();
+ *   } catch (error) {
+ *     // Handle any additional logic needed on error
+ *   }
+ * };
+ *
+ * // Example 3: Using error store directly for custom error handling
+ * const handleCustomOperation = async () => {
+ *   await errorStore.withErrorHandling('custom-operation', async () => {
+ *     // Your custom async operation here
+ *     const result = await someApiCall();
+ *     return result;
+ *   }, {
+ *     componentName: 'customComponent',
+ *     showNotification: true,
+ *     rethrow: false // Don't re-throw errors, just handle them
+ *   });
+ * };
+ *
+ * // Example 4: Using notification store directly
+ * const showCustomNotification = () => {
+ *   notificationStore.addNotification({
+ *     type: 'info',
+ *     title: 'Custom Notification',
+ *     message: 'This is a custom message with actions',
+ *     actions: [
+ *       {
+ *         label: 'Retry',
+ *         variant: 'primary',
+ *         handler: () => loadClientData()
+ *       },
+ *       {
+ *         label: 'Cancel',
+ *         variant: 'secondary'
+ *       }
+ *     ]
+ *   });
+ * };
+ *
+ * onMounted(() => {
+ *   loadClientData();
+ * });
+ * </script>
+ */
+
+export default ApiWithErrorHandling;

frontend/src/api-toast.js

@@ -0,0 +1,241 @@
+/**
+ * Enhanced API wrapper with PrimeVue Toast integration
+ *
+ * This provides a cleaner, simpler API error handling system using PrimeVue Toast
+ * instead of a complex custom notification system.
+ */
+
+import { useErrorStore } from "@/stores/errors";
+import { useLoadingStore } from "@/stores/loading";
+import Api from "./api";
+
+export class ApiWithToast {
+	static async makeApiCall(apiFunction, options = {}) {
+		const {
+			// Error handling options
+			componentName = null,
+			showErrorToast = true,
+			showSuccessToast = false,
+
+			// Loading options
+			showLoading = true,
+			loadingMessage = "Loading...",
+
+			// Success options
+			successMessage = null,
+
+			// Error options
+			customErrorMessage = null,
+
+			// Retry options
+			retryCount = 0,
+			retryDelay = 1000,
+
+			// Operation identifier for tracking
+			operationKey = null,
+			rethrow = false,
+		} = options;
+
+		const errorStore = useErrorStore();
+		const loadingStore = useLoadingStore();
+
+		// Generate operation key if not provided
+		const operation = operationKey || `api-${Date.now()}`;
+
+		try {
+			// Clear any existing errors
+			if (componentName) {
+				errorStore.clearComponentError(componentName);
+			}
+
+			// Show loading state
+			if (showLoading) {
+				if (componentName) {
+					loadingStore.setComponentLoading(componentName, true, loadingMessage);
+				} else {
+					loadingStore.startOperation(operation, loadingMessage);
+				}
+			}
+
+			// Make the API call with retry logic
+			let attempt = 0;
+			while (attempt <= retryCount) {
+				try {
+					const result = await apiFunction();
+
+					// Show success toast if requested
+					if (showSuccessToast && successMessage) {
+						errorStore.setSuccess(successMessage);
+					}
+
+					return result;
+				} catch (error) {
+					attempt++;
+
+					if (attempt <= retryCount) {
+						// Wait before retry
+						await new Promise((resolve) => setTimeout(resolve, retryDelay));
+						continue;
+					}
+
+					// Final attempt failed - handle error
+					if (componentName) {
+						errorStore.setComponentError(componentName, error, false);
+					}
+
+					// Show error toast
+					if (showErrorToast) {
+						const errorMessage = customErrorMessage || this.extractErrorMessage(error);
+						errorStore.setGlobalError(new Error(errorMessage));
+					}
+
+					// Rethrow error if requested (default is to rethrow)
+					if (rethrow) {
+						throw error;
+					}
+
+					// If not rethrowing, return null to indicate failure
+					return null;
+				}
+			}
+		} finally {
+			// Always clear loading state
+			if (showLoading) {
+				if (componentName) {
+					loadingStore.setComponentLoading(componentName, false);
+				} else {
+					loadingStore.stopOperation(operation);
+				}
+			}
+		}
+	}
+
+	// Helper to extract meaningful error messages
+	static extractErrorMessage(error) {
+		if (typeof error === "string") {
+			return error;
+		}
+
+		if (error?.response?.data?.message) {
+			return error.response.data.message;
+		}
+
+		if (error?.message) {
+			return error.message;
+		}
+
+		if (error?.request) {
+			return "Network error - please check your connection";
+		}
+
+		return "An unexpected error occurred";
+	}
+
+	// Convenience methods for common API operations
+	static async getClientStatusCounts(options = {}) {
+		return this.makeApiCall(() => Api.getClientStatusCounts(), {
+			operationKey: "client-status-counts",
+			componentName: "clients",
+			loadingMessage: "Loading client status data...",
+			showSuccessToast: false, // Don't show success for data fetches
+			...options,
+		});
+	}
+
+	static async getPaginatedClientDetails(paginationParams, filters, sorting, options = {}) {
+		return this.makeApiCall(
+			() => Api.getPaginatedClientDetails(paginationParams, filters, sorting),
+			{
+				operationKey: "client-table-data",
+				componentName: "dataTable",
+				loadingMessage: "Loading client data...",
+				showSuccessToast: false,
+				...options,
+			},
+		);
+	}
+
+	static async createClient(clientData, options = {}) {
+		return this.makeApiCall(() => Api.createClient(clientData), {
+			operationKey: "create-client",
+			componentName: "form",
+			loadingMessage: "Creating client...",
+			showSuccessToast: true,
+			successMessage: "Client created successfully!",
+			...options,
+		});
+	}
+
+	static async getPaginatedJobDetails(paginationParams, filters, sorting, options = {}) {
+		return this.makeApiCall(
+			() => Api.getPaginatedJobDetails(paginationParams, filters, sorting),
+			{
+				operationKey: "job-table-data",
+				componentName: "jobs",
+				loadingMessage: "Loading job data...",
+				showSuccessToast: false,
+				...options,
+			},
+		);
+	}
+
+	static async getPaginatedWarrantyData(paginationParams, filters, sorting, options = {}) {
+		return this.makeApiCall(
+			() => Api.getPaginatedWarrantyData(paginationParams, filters, sorting),
+			{
+				operationKey: "warranty-table-data",
+				componentName: "warranties",
+				loadingMessage: "Loading warranty data...",
+				showSuccessToast: false,
+				...options,
+			},
+		);
+	}
+
+	static async getCityStateByZip(zipcode, options = {}) {
+		return this.makeApiCall(() => Api.getCityStateByZip(zipcode), {
+			operationKey: "zip-lookup",
+			componentName: "form",
+			loadingMessage: "Looking up location...",
+			showSuccessToast: false,
+			customErrorMessage: "Unable to find location for the provided zip code",
+			retryCount: 2,
+			retryDelay: 1000,
+			...options,
+		});
+	}
+}
+
+/**
+ * Simple usage examples:
+ *
+ * // Basic API call with automatic toast notifications
+ * try {
+ *   const result = await ApiWithToast.getPaginatedClientDetails(pagination, filters, []);
+ *   // Success - data loaded, no toast shown for data fetches
+ * } catch (error) {
+ *   // Error toast automatically shown, component error set
+ * }
+ *
+ * // Create operation with success toast
+ * try {
+ *   await ApiWithToast.createClient(formData);
+ *   // Success toast shown automatically: "Client created successfully!"
+ * } catch (error) {
+ *   // Error toast shown automatically with appropriate message
+ * }
+ *
+ * // Custom options
+ * await ApiWithToast.makeApiCall(
+ *   () => someApiCall(),
+ *   {
+ *     componentName: 'myComponent',
+ *     showSuccessToast: true,
+ *     successMessage: 'Operation completed!',
+ *     retryCount: 3,
+ *     customErrorMessage: 'Custom error message'
+ *   }
+ * );
+ */
+
+export default ApiWithToast;

frontend/src/api.js

@@ -3,12 +3,14 @@ import ApiUtils from "./apiUtils";
 const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
 const FRAPPE_PROXY_METHOD = "custom_ui.api.proxy.request";
 const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.estimates.upsert_estimate";
+const FRAPPE_GET_JOBS_METHOD = "custom_ui.api.db.get_jobs";
 const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.jobs.upsert_job";
 const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.invoices.upsert_invoice";
 const FRAPPE_UPSERT_CLIENT_METHOD = "custom_ui.api.db.clients.upsert_client";
 const FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD = "custom_ui.api.db.clients.get_client_status_counts";
 const FRAPPE_GET_CLIENT_TABLE_DATA_METHOD = "custom_ui.api.db.clients.get_clients_table_data";
 const FRAPPE_GET_CLIENT_METHOD = "custom_ui.api.db.clients.get_client";
+const FRAPPE_GET_CLIENT_NAMES_METHOD = "custom_ui.api.db.clients.get_client_names";
 
 class Api {
 	static async request(frappeMethod, args = {}) {
@@ -19,10 +21,12 @@ class Api {
 			let response = await frappe.call(request);
 			response = ApiUtils.toCamelCaseObject(response);
 			console.log("DEBUG: API - Request Response: ", response);
-			return response.message;
+			if (response.message.status && response.message.status === "error") {
+				throw new Error(response.message.message);
+			}
+			return response.message.data;
 		} catch (error) {
-			console.error("DEBUG: API - Request Error: ", error);
-			// Re-throw the error so calling code can handle it
+			console.error("ERROR: API - Request Error: ", error);
 			throw error;
 		}
 	}
@@ -145,7 +149,7 @@ class Api {
 
 		console.log("DEBUG: API - Sending job options to backend:", options);
 
-		const result = await this.request("custom_ui.api.db.get_jobs", { options });
+		const result = await this.request(FRAPPE_GET_JOBS_METHOD, { options });
 		return result;
 	}
 
@@ -238,11 +242,8 @@ class Api {
 		return doc;
 	}
 
-	static async getCustomerNames() {
-		const customers = await this.getDocsList("Customer", ["name"]);
-		const customerNames = customers.map((customer) => customer.name);
-		console.log("DEBUG: API - Fetched Customer Names: ", customerNames);
-		return customerNames;
+	static async getCustomerNames(type) {
+		return await this.request(FRAPPE_GET_CLIENT_NAMES_METHOD, { type });
 	}
 
 	static async getCompanyNames() {

frontend/src/components/SideBar.vue

@@ -11,24 +11,21 @@ import {
 	PathArrowSolid,
 	Clock,
 	HistoricShield,
+	Developer,
 } from "@iconoir/vue";
 import SpeedDial from "primevue/speeddial";
 
 const router = useRouter();
 const modalStore = useModalStore();
-const categories = [
-	{ name: "Home", icon: Home, url: "/" },
-	{ name: "Calendar", icon: Calendar, url: "/calendar" },
-	{ name: "Clients", icon: Community, url: "/clients" },
-	{ name: "Jobs", icon: Hammer, url: "/jobs" },
-	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
-	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
-	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
+
+const developmentButtons = ref([
 	{
-		name: "Create New",
-		icon: MultiplePagesPlus,
+		label: "Error Handling Demo",
+		command: () => {
+			router.push("/dev/error-handling-demo");
+		},
 	},
-];
+]);
 
 const createButtons = ref([
 	{
@@ -70,6 +67,22 @@ const createButtons = ref([
 		},
 	},
 ]);
+
+const categories = ref([
+	{ name: "Home", icon: Home, url: "/" },
+	{ name: "Calendar", icon: Calendar, url: "/calendar" },
+	{ name: "Clients", icon: Community, url: "/clients" },
+	{ name: "Jobs", icon: Hammer, url: "/jobs" },
+	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
+	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
+	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
+	{
+		name: "Create New",
+		icon: MultiplePagesPlus,
+		buttons: createButtons,
+	},
+	{ name: "Development", icon: Developer, buttons: developmentButtons },
+]);
 const handleCategoryClick = (category) => {
 	router.push(category.url);
 };
@@ -94,7 +107,7 @@ const handleCategoryClick = (category) => {
 				</button>
 			</template>
 			<template v-else>
-				<SpeedDial :model="createButtons" direction="down" type="linear" radius="50">
+				<SpeedDial :model="category.buttons" direction="down" type="linear" radius="50">
 					<template #button="{ toggleCallback }">
 						<button
 							class="sidebar-button"

frontend/src/components/common/NotificationDisplay.vue

@@ -0,0 +1,438 @@
+<template>
+	<div class="notification-container" :class="positionClass">
+		<TransitionGroup name="notification" tag="div" class="notification-list">
+			<div
+				v-for="notification in activeNotifications"
+				:key="notification.id"
+				:class="notificationClass(notification)"
+				class="notification"
+				@click="markAsSeen(notification.id)"
+			>
+				<!-- Notification Header -->
+				<div class="notification-header">
+					<div class="notification-icon">
+						<i :class="getIcon(notification.type)"></i>
+					</div>
+					<div class="notification-content">
+						<h4 v-if="notification.title" class="notification-title">
+							{{ notification.title }}
+						</h4>
+						<p class="notification-message">{{ notification.message }}</p>
+					</div>
+					<button
+						@click.stop="dismissNotification(notification.id)"
+						class="notification-close"
+						type="button"
+					>
+						<i class="mdi mdi-close"></i>
+					</button>
+				</div>
+
+				<!-- Notification Actions -->
+				<div
+					v-if="notification.actions && notification.actions.length > 0"
+					class="notification-actions"
+				>
+					<button
+						v-for="action in notification.actions"
+						:key="action.label"
+						@click.stop="handleAction(action, notification)"
+						:class="action.variant || 'primary'"
+						class="notification-action-btn"
+						type="button"
+					>
+						<i v-if="action.icon" :class="action.icon"></i>
+						{{ action.label }}
+					</button>
+				</div>
+
+				<!-- Progress Bar for timed notifications -->
+				<div
+					v-if="!notification.persistent && notification.duration > 0"
+					class="notification-progress"
+				>
+					<div
+						class="notification-progress-bar"
+						:style="{ animationDuration: notification.duration + 'ms' }"
+					></div>
+				</div>
+			</div>
+		</TransitionGroup>
+	</div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { useNotificationStore } from "../../stores/notifications-primevue";
+
+export default {
+	name: "NotificationDisplay",
+	setup() {
+		const notificationStore = useNotificationStore();
+
+		const activeNotifications = computed(() => notificationStore.activeNotifications);
+
+		const positionClass = computed(
+			() => `notification-container--${notificationStore.position}`,
+		);
+
+		const notificationClass = (notification) => [
+			`notification--${notification.type}`,
+			{
+				"notification--seen": notification.seen,
+				"notification--persistent": notification.persistent,
+			},
+		];
+
+		const getIcon = (type) => {
+			const icons = {
+				success: "mdi mdi-check-circle",
+				error: "mdi mdi-alert-circle",
+				warning: "mdi mdi-alert",
+				info: "mdi mdi-information",
+			};
+			return icons[type] || icons.info;
+		};
+
+		const dismissNotification = (id) => {
+			notificationStore.dismissNotification(id);
+		};
+
+		const markAsSeen = (id) => {
+			notificationStore.markAsSeen(id);
+		};
+
+		const handleAction = (action, notification) => {
+			if (action.handler) {
+				action.handler(notification);
+			}
+
+			// Auto-dismiss notification after action unless specified otherwise
+			if (action.dismissAfter !== false) {
+				dismissNotification(notification.id);
+			}
+		};
+
+		return {
+			activeNotifications,
+			positionClass,
+			notificationClass,
+			getIcon,
+			dismissNotification,
+			markAsSeen,
+			handleAction,
+		};
+	},
+};
+</script>
+
+<style scoped>
+.notification-container {
+	position: fixed;
+	z-index: 9999;
+	pointer-events: none;
+	max-width: 400px;
+	width: 100%;
+	padding: 1rem;
+}
+
+/* Position variants */
+.notification-container--top-right {
+	top: 0;
+	right: 0;
+}
+
+.notification-container--top-left {
+	top: 0;
+	left: 0;
+}
+
+.notification-container--bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+.notification-container--bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+.notification-container--top-center {
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.notification-container--bottom-center {
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.notification-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.notification {
+	pointer-events: auto;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	border-left: 4px solid;
+	overflow: hidden;
+	min-width: 320px;
+	max-width: 100%;
+	position: relative;
+}
+
+/* Notification type variants */
+.notification--success {
+	border-left-color: #10b981;
+}
+
+.notification--error {
+	border-left-color: #ef4444;
+}
+
+.notification--warning {
+	border-left-color: #f59e0b;
+}
+
+.notification--info {
+	border-left-color: #3b82f6;
+}
+
+.notification-header {
+	display: flex;
+	align-items: flex-start;
+	padding: 1rem;
+	gap: 0.75rem;
+}
+
+.notification-icon {
+	flex-shrink: 0;
+	font-size: 1.25rem;
+	margin-top: 0.125rem;
+}
+
+.notification--success .notification-icon {
+	color: #10b981;
+}
+
+.notification--error .notification-icon {
+	color: #ef4444;
+}
+
+.notification--warning .notification-icon {
+	color: #f59e0b;
+}
+
+.notification--info .notification-icon {
+	color: #3b82f6;
+}
+
+.notification-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.notification-title {
+	margin: 0 0 0.25rem 0;
+	font-size: 0.875rem;
+	font-weight: 600;
+	color: #1f2937;
+}
+
+.notification-message {
+	margin: 0;
+	font-size: 0.875rem;
+	color: #6b7280;
+	line-height: 1.4;
+	word-wrap: break-word;
+}
+
+.notification-close {
+	flex-shrink: 0;
+	background: none;
+	border: none;
+	color: #9ca3af;
+	cursor: pointer;
+	padding: 0.25rem;
+	border-radius: 4px;
+	transition: all 0.2s;
+	font-size: 1rem;
+}
+
+.notification-close:hover {
+	color: #6b7280;
+	background-color: #f3f4f6;
+}
+
+.notification-actions {
+	padding: 0 1rem 1rem 1rem;
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+	margin-top: -0.25rem;
+}
+
+.notification-action-btn {
+	padding: 0.5rem 1rem;
+	border: 1px solid #d1d5db;
+	background: white;
+	color: #374151;
+	border-radius: 6px;
+	font-size: 0.75rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.notification-action-btn:hover {
+	background: #f9fafb;
+	border-color: #9ca3af;
+}
+
+.notification-action-btn.primary {
+	background: #3b82f6;
+	border-color: #3b82f6;
+	color: white;
+}
+
+.notification-action-btn.primary:hover {
+	background: #2563eb;
+}
+
+.notification-action-btn.danger {
+	background: #ef4444;
+	border-color: #ef4444;
+	color: white;
+}
+
+.notification-action-btn.danger:hover {
+	background: #dc2626;
+}
+
+.notification-progress {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.notification-progress-bar {
+	height: 100%;
+	background: currentColor;
+	opacity: 0.3;
+	animation: progress-decrease linear forwards;
+	transform-origin: left;
+}
+
+.notification--success .notification-progress-bar {
+	background: #10b981;
+}
+
+.notification--error .notification-progress-bar {
+	background: #ef4444;
+}
+
+.notification--warning .notification-progress-bar {
+	background: #f59e0b;
+}
+
+.notification--info .notification-progress-bar {
+	background: #3b82f6;
+}
+
+@keyframes progress-decrease {
+	from {
+		width: 100%;
+	}
+	to {
+		width: 0%;
+	}
+}
+
+/* Transition animations */
+.notification-enter-active {
+	transition: all 0.3s ease-out;
+}
+
+.notification-leave-active {
+	transition: all 0.3s ease-in;
+}
+
+.notification-enter-from {
+	opacity: 0;
+	transform: translateX(100%);
+}
+
+.notification-leave-to {
+	opacity: 0;
+	transform: translateX(100%);
+}
+
+/* Adjustments for left-positioned containers */
+.notification-container--top-left .notification-enter-from,
+.notification-container--bottom-left .notification-enter-from,
+.notification-container--top-left .notification-leave-to,
+.notification-container--bottom-left .notification-leave-to {
+	transform: translateX(-100%);
+}
+
+/* Adjustments for center-positioned containers */
+.notification-container--top-center .notification-enter-from,
+.notification-container--bottom-center .notification-enter-from,
+.notification-container--top-center .notification-leave-to,
+.notification-container--bottom-center .notification-leave-to {
+	transform: translateY(-100%);
+}
+
+.notification-container--bottom-center .notification-enter-from,
+.notification-container--bottom-center .notification-leave-to {
+	transform: translateY(100%);
+}
+
+/* Hover effects */
+.notification:hover {
+	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.notification--seen {
+	opacity: 0.95;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+	.notification-container {
+		left: 0;
+		right: 0;
+		max-width: none;
+		padding: 0.5rem;
+	}
+
+	.notification-container--top-center,
+	.notification-container--bottom-center {
+		transform: none;
+	}
+
+	.notification {
+		min-width: auto;
+	}
+
+	.notification-header {
+		padding: 0.75rem;
+	}
+
+	.notification-actions {
+		padding: 0 0.75rem 0.75rem 0.75rem;
+	}
+}
+</style>

frontend/src/components/pages/Client.vue

@@ -35,20 +35,44 @@ import Tab from "primevue/tab";
 import TabPanels from "primevue/tabpanels";
 import TabPanel from "primevue/tabpanel";
 import Api from "../../api";
+import ApiWithToast from "../../api-toast";
+import { useLoadingStore } from "../../stores/loading";
+import { useErrorStore } from "../../stores/errors";
 
+const loadingStore = useLoadingStore();
+const errorStore = useErrorStore();
+const clientNames = ref([]);
 const client = ref({});
 const { clientName } = defineProps({
 	clientName: { type: String, required: true },
 });
 
+const getClientNames = async (type) => {
+	loadingStore.setLoading(true);
+	try {
+		const names = await Api.getCustomerNames(type);
+		clientNames.value = names;
+	} catch (error) {
+		errorStore.addError(error.message || "Error fetching client names");
+	} finally {
+		loadingStore.setLoading(false);
+	}
+};
+
+const getClient = async (name) => {
+	loadingStore.setLoading(true);
+	const clientData = await ApiWithToast.makeApiCall(() => Api.getClient(name));
+	client.value = clientData || {};
+	loadingStore.setLoading(false);
+};
+
 onMounted(async () => {
 	if (clientName === "new") {
 		// Logic for creating a new client
 		console.log("Creating a new client");
 	} else {
 		// Logic for fetching and displaying existing client data
-		const clientData = await Api.getClient(clientName);
-		client.value = clientData;
+		await getClient(clientName);
 	}
 });
 </script>

frontend/src/components/pages/ErrorHandlingDemo.vue

@@ -0,0 +1,664 @@
+<template>
+	<div class="error-handling-example">
+		<h3>PrimeVue Toast Error Handling Demo</h3>
+
+		<!-- Error Display Section -->
+		<div class="error-section" v-if="errorStore.hasAnyError">
+			<h4>Current Component Errors (for debugging):</h4>
+			<div class="error-list">
+				<div v-if="errorStore.lastError" class="error-item global-error">
+					<strong>Global Error:</strong> {{ errorStore.lastError.message }}
+					<button @click="errorStore.clearGlobalError()" class="clear-btn">Clear</button>
+				</div>
+
+				<div
+					v-for="(error, component) in errorStore.componentErrors"
+					:key="component"
+					v-if="error"
+					class="error-item component-error"
+				>
+					<strong>{{ component }} Error:</strong> {{ error.message }}
+					<button @click="errorStore.clearComponentError(component)" class="clear-btn">
+						Clear
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Demo Buttons -->
+		<div class="demo-section">
+			<h4>Test PrimeVue Toast Notifications:</h4>
+			<div class="button-group">
+				<Button
+					@click="testSuccessfulApiCall"
+					label="Successful API Call"
+					class="p-button-success"
+					:loading="loadingStore.getComponentLoading('demo-success')"
+				/>
+
+				<Button
+					@click="testFailingApiCall"
+					label="Failing API Call"
+					class="p-button-danger"
+					:loading="loadingStore.getComponentLoading('demo-fail')"
+				/>
+
+				<Button
+					@click="testRetryApiCall"
+					label="API Call with Retry"
+					class="p-button-warning"
+					:loading="loadingStore.getComponentLoading('demo-retry')"
+				/>
+
+				<Button
+					@click="testDirectToasts"
+					label="Direct Toast Messages"
+					class="p-button-info"
+				/>
+			</div>
+
+			<div class="button-group">
+				<Button @click="testComponentError" label="Component Error" severity="secondary" />
+
+				<Button @click="testGlobalError" label="Global Error" severity="secondary" />
+
+				<Button @click="clearAllErrors" label="Clear All Errors" severity="secondary" />
+			</div>
+		</div>
+
+		<!-- Real API Demo with ApiWithToast -->
+		<div class="api-demo-section">
+			<h4>Real API Integration with ApiWithToast:</h4>
+			<div class="button-group">
+				<Button
+					@click="loadClientData"
+					label="Load Client Data"
+					class="p-button-primary"
+					:loading="loadingStore.getComponentLoading('clients')"
+				/>
+
+				<Button
+					@click="loadJobData"
+					label="Load Job Data"
+					class="p-button-primary"
+					:loading="loadingStore.getComponentLoading('jobs')"
+				/>
+
+				<Button
+					@click="createTestClient"
+					label="Create Test Client"
+					class="p-button-success"
+					:loading="loadingStore.getComponentLoading('form')"
+				/>
+			</div>
+
+			<div v-if="clientData.length > 0" class="data-preview">
+				<h5>Client Data ({{ clientData.length }} items):</h5>
+				<pre>{{ JSON.stringify(clientData.slice(0, 2), null, 2) }}</pre>
+			</div>
+
+			<div v-if="clientStatusData" class="data-preview">
+				<h5>Client Status Counts:</h5>
+				<div class="status-grid">
+					<div
+						v-for="(count, status) in clientStatusData"
+						:key="status"
+						class="status-item"
+					>
+						<strong>{{ status }}:</strong> {{ count }}
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Error History -->
+		<div class="history-section">
+			<h4>Error History:</h4>
+			<Button
+				@click="showHistory = !showHistory"
+				:label="`${showHistory ? 'Hide' : 'Show'} History (${errorStore.errorHistory.length})`"
+				severity="secondary"
+			/>
+
+			<div v-if="errorStore.errorHistory.length === 0 && showHistory" class="no-history">
+				<p>
+					No errors in history yet. Try clicking the error buttons above to generate some
+					errors!
+				</p>
+			</div>
+
+			<!-- Debug info -->
+			<div v-if="showHistory" class="debug-info">
+				<p><strong>Debug Info:</strong></p>
+				<p>History array length: {{ errorStore.errorHistory.length }}</p>
+				<p>
+					Recent errors method returns: {{ errorStore.getRecentErrors(5).length }} items
+				</p>
+			</div>
+
+			<div v-if="showHistory && errorStore.errorHistory.length > 0" class="history-list">
+				<div
+					v-for="error in errorStore.getRecentErrors(5)"
+					:key="error.id"
+					class="history-item"
+				>
+					<div class="history-header">
+						<span class="error-type">{{ error.type }}</span>
+						<span class="error-source">{{ error.source }}</span>
+						<span class="error-time">{{ formatTime(error.timestamp) }}</span>
+					</div>
+					<div class="error-message">{{ error.message }}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import Button from "primevue/button";
+import { useErrorStore } from "@/stores/errors";
+import { useLoadingStore } from "@/stores/loading";
+import ApiWithToast from "@/api-toast";
+
+const errorStore = useErrorStore();
+const loadingStore = useLoadingStore();
+
+const clientData = ref([]);
+const clientStatusData = ref(null);
+const showHistory = ref(false);
+
+// Test functions using ApiWithToast
+const testSuccessfulApiCall = async () => {
+	try {
+		await ApiWithToast.makeApiCall(
+			async () => {
+				await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
+				return { success: true };
+			},
+			{
+				componentName: "demo-success",
+				showSuccessToast: true,
+				successMessage: "API call completed successfully!",
+				loadingMessage: "Processing request...",
+			},
+		);
+	} catch (error) {
+		// Error toast shown automatically
+		console.log("Error was handled automatically");
+	}
+};
+
+const testFailingApiCall = async () => {
+	try {
+		await ApiWithToast.makeApiCall(
+			async () => {
+				await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
+				throw new Error("This is a simulated API failure for demo purposes");
+			},
+			{
+				componentName: "demo-fail",
+				showErrorToast: true,
+				customErrorMessage: "Demo API call failed as expected",
+				loadingMessage: "Attempting to fail...",
+			},
+		);
+	} catch (error) {
+		console.log("Error was handled by ApiWithToast");
+	}
+};
+
+const testRetryApiCall = async () => {
+	let attempts = 0;
+
+	try {
+		await ApiWithToast.makeApiCall(
+			async () => {
+				attempts++;
+				await new Promise((resolve) => setTimeout(resolve, 500));
+
+				if (attempts < 3) {
+					throw new Error(`Attempt ${attempts} failed - will retry`);
+				}
+
+				return { success: true, attempts };
+			},
+			{
+				componentName: "demo-retry",
+				retryCount: 2,
+				retryDelay: 1000,
+				showSuccessToast: true,
+				successMessage: `Success after ${attempts} attempts!`,
+				customErrorMessage: "All retry attempts failed",
+				loadingMessage: "Retrying operation...",
+			},
+		);
+	} catch (error) {
+		console.log("Retry test completed");
+	}
+};
+
+const testDirectToasts = () => {
+	// Test different toast types directly through error store
+	errorStore.setSuccess("This is a success message!");
+
+	setTimeout(() => {
+		errorStore.setInfo("This is an info message!");
+	}, 500);
+
+	setTimeout(() => {
+		errorStore.setWarning("This is a warning message!");
+	}, 1000);
+
+	setTimeout(() => {
+		errorStore.setGlobalError(new Error("This is an error message!"));
+	}, 1500);
+};
+
+const testComponentError = () => {
+	errorStore.setComponentError(
+		"demo-component",
+		new Error("This is a component-specific error"),
+	);
+	// Error notification will be shown automatically!
+};
+
+const testGlobalError = () => {
+	errorStore.setGlobalError(
+		new Error("This is a global error that affects the entire application"),
+	);
+	// Error notification will be shown automatically!
+};
+
+const clearAllErrors = () => {
+	errorStore.clearAllErrors();
+	errorStore.setSuccess("All errors cleared!");
+};
+
+// Real API integration using ApiWithToast
+const loadClientData = async () => {
+	try {
+		const result = await ApiWithToast.getPaginatedClientDetails(
+			{ page: 0, pageSize: 5 },
+			{},
+			[],
+			{
+				showSuccessToast: true,
+				successMessage: "Client data loaded successfully!",
+			},
+		);
+
+		clientData.value = result?.data || [];
+
+		// Also load client status counts
+		const statusResult = await ApiWithToast.getClientStatusCounts();
+		clientStatusData.value = statusResult;
+	} catch (error) {
+		console.log("Client data loading failed, but error was handled automatically");
+	}
+};
+
+const loadJobData = async () => {
+	try {
+		const result = await ApiWithToast.getPaginatedJobDetails(
+			{ page: 0, pageSize: 5 },
+			{},
+			[],
+			{
+				showSuccessToast: true,
+				successMessage: "Job data loaded successfully!",
+			},
+		);
+		console.log("Job data loaded:", result);
+	} catch (error) {
+		console.log("Job data loading failed, but error was handled automatically");
+	}
+};
+
+const createTestClient = async () => {
+	const testClient = {
+		customer_name: `Demo Client ${Date.now()}`,
+		mobile_no: "555-0199",
+		email: `demo${Date.now()}@example.com`,
+		status: "Active",
+	};
+
+	try {
+		await ApiWithToast.createClient(testClient);
+		// Success toast shown automatically
+		// Reload client data to show the change
+		await loadClientData();
+	} catch (error) {
+		console.log("Client creation failed, but error was handled automatically");
+	}
+};
+
+// Utility functions
+const formatTime = (timestamp) => {
+	return new Date(timestamp).toLocaleTimeString();
+};
+
+onMounted(() => {
+	// Show a welcome notification using the integrated error store
+	errorStore.setInfo(
+		"🎉 Error Store now automatically creates PrimeVue Toast notifications! No need to import both stores anymore.",
+		"Welcome",
+	);
+
+	// Add some sample errors to history for demonstration (without showing notifications)
+	setTimeout(() => {
+		errorStore.setComponentError(
+			"demo-component",
+			new Error("Sample component error from page load"),
+			false,
+		);
+		errorStore.setApiError(
+			"demo-api",
+			new Error("Sample API error from initialization"),
+			false,
+		);
+
+		// Clear the component errors so they don't show in the error section, but keep them in history
+		setTimeout(() => {
+			errorStore.clearComponentError("demo-component");
+			errorStore.clearApiError("demo-api");
+		}, 100);
+	}, 1000);
+});
+</script>
+
+<style scoped>
+.error-handling-example {
+	padding: 2rem;
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+.info-banner {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.info-banner h4 {
+	color: white;
+	margin-bottom: 1rem;
+	font-size: 1.5rem;
+}
+
+.info-banner p {
+	margin-bottom: 0.5rem;
+	font-size: 1rem;
+	line-height: 1.6;
+}
+
+.info-banner strong {
+	color: #ffd700;
+}
+
+.error-section {
+	background: var(--surface-card);
+	border: 1px solid var(--surface-border);
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 2rem;
+	border-left: 4px solid var(--orange-500);
+}
+
+.error-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.error-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem;
+	border-radius: 4px;
+}
+
+.global-error {
+	background: #fee2e2;
+	border-left: 4px solid #ef4444;
+}
+
+.component-error {
+	background: #fef3c7;
+	border-left: 4px solid #f59e0b;
+}
+
+.demo-section,
+.api-demo-section,
+.history-section {
+	margin-bottom: 2rem;
+	background: var(--surface-card);
+	padding: 1.5rem;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.button-group {
+	display: flex;
+	gap: 0.75rem;
+	flex-wrap: wrap;
+	margin-bottom: 1rem;
+}
+
+.btn {
+	padding: 0.5rem 1rem;
+	border: none;
+	border-radius: 6px;
+	cursor: pointer;
+	font-weight: 500;
+	transition: all 0.2s;
+}
+
+.btn:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+.btn.success {
+	background: #10b981;
+	color: white;
+}
+
+.btn.success:hover:not(:disabled) {
+	background: #059669;
+}
+
+.btn.error {
+	background: #ef4444;
+	color: white;
+}
+
+.btn.error:hover:not(:disabled) {
+	background: #dc2626;
+}
+
+.btn.warning {
+	background: #f59e0b;
+	color: white;
+}
+
+.btn.warning:hover:not(:disabled) {
+	background: #d97706;
+}
+
+.btn.info {
+	background: #3b82f6;
+	color: white;
+}
+
+.btn.info:hover:not(:disabled) {
+	background: #2563eb;
+}
+
+.btn.primary {
+	background: #6366f1;
+	color: white;
+}
+
+.btn.primary:hover:not(:disabled) {
+	background: #4f46e5;
+}
+
+.btn.secondary {
+	background: #6b7280;
+	color: white;
+}
+
+.btn.secondary:hover:not(:disabled) {
+	background: #4b5563;
+}
+
+.clear-btn {
+	background: #f3f4f6;
+	border: 1px solid #d1d5db;
+	padding: 0.25rem 0.5rem;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 0.75rem;
+}
+
+.clear-btn:hover {
+	background: #e5e7eb;
+}
+
+.data-preview {
+	margin-top: 1rem;
+	padding: 1rem;
+	background: var(--surface-ground);
+	border-radius: 6px;
+	border: 1px solid var(--surface-border);
+}
+
+.data-preview pre {
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--text-color);
+	white-space: pre-wrap;
+}
+
+.status-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+	gap: 1rem;
+	margin-top: 1rem;
+}
+
+.status-item {
+	padding: 0.75rem;
+	background: var(--surface-card);
+	border: 1px solid var(--surface-border);
+	border-radius: 6px;
+	text-align: center;
+}
+
+.history-list {
+	margin-top: 1rem;
+}
+
+.history-item {
+	padding: 0.75rem;
+	border: 1px solid #e5e7eb;
+	border-radius: 6px;
+	margin-bottom: 0.5rem;
+	background: white;
+}
+
+.history-header {
+	display: flex;
+	gap: 1rem;
+	margin-bottom: 0.25rem;
+	font-size: 0.75rem;
+	color: #6b7280;
+}
+
+.error-type {
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.error-source {
+	color: #3b82f6;
+}
+
+.error-message {
+	font-size: 0.875rem;
+	color: #374151;
+}
+
+h3,
+h4,
+h5 {
+	color: var(--text-color);
+	margin-bottom: 1rem;
+}
+
+h3 {
+	font-size: 1.75rem;
+	font-weight: 700;
+	text-align: center;
+	margin-bottom: 2rem;
+}
+
+h4 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--primary-color);
+}
+
+h5 {
+	font-size: 1rem;
+	font-weight: 500;
+	color: var(--text-color-secondary);
+}
+
+/* Keep some button styles for legacy buttons like clear-btn */
+.btn {
+	padding: 0.5rem 1rem;
+	border: none;
+	border-radius: 6px;
+	cursor: pointer;
+	font-weight: 500;
+	transition: all 0.2s;
+}
+
+.btn.secondary {
+	background: #6b7280;
+	color: white;
+}
+
+.btn.secondary:hover:not(:disabled) {
+	background: #4b5563;
+}
+
+.no-history {
+	margin-top: 1rem;
+	padding: 1rem;
+	background: var(--surface-ground);
+	border-radius: 6px;
+	color: var(--text-color-secondary);
+	text-align: center;
+	font-style: italic;
+}
+
+.debug-info {
+	margin-top: 1rem;
+	padding: 0.75rem;
+	background: var(--yellow-50);
+	border: 1px solid var(--yellow-200);
+	border-radius: 6px;
+	font-size: 0.875rem;
+}
+
+.debug-info p {
+	margin: 0.25rem 0;
+}
+</style>

frontend/src/router.js

@@ -10,6 +10,7 @@ import Warranties from "./components/pages/Warranties.vue";
 import Home from "./components/pages/Home.vue";
 import TestDateForm from "./components/pages/TestDateForm.vue";
 import Client from "./components/pages/Client.vue";
+import ErrorHandlingDemo from "./components/pages/ErrorHandlingDemo.vue";
 
 const routes = [
 	{
@@ -25,6 +26,8 @@ const routes = [
 	{ path: "/timesheets", component: TimeSheets },
 	{ path: "/warranties", component: Warranties },
 	{ path: "/test-dates", component: TestDateForm },
+	{ path: "/dev/error-handling-demo", component: ErrorHandlingDemo },
+	{ path: "/:pathMatch(.*)*", component: Home }, // Fallback to Home for unknown routes
 ];
 
 const router = createRouter({

frontend/src/stores/errors.js

@@ -0,0 +1,341 @@
+import { defineStore } from "pinia";
+import { useNotificationStore } from "./notifications-primevue";
+
+/**
+ * Enhanced Error Store with Automatic PrimeVue Toast Notifications
+ *
+ * This store automatically creates PrimeVue Toast notifications when errors are set.
+ * No need to import both error and notification stores - just use this one!
+ *
+ * Usage:
+ * import { useErrorStore } from '@/stores/errors'
+ * const errorStore = useErrorStore()
+ *
+ * // These will automatically show toast notifications:
+ * errorStore.setGlobalError(new Error("Something went wrong"))
+ * errorStore.setComponentError("form", new Error("Validation failed"))
+ * errorStore.setApiError("fetch-users", new Error("Network error"))
+ *
+ * // Convenience methods for non-error notifications:
+ * errorStore.setSuccess("Operation completed!")
+ * errorStore.setWarning("Please check your input")
+ * errorStore.setInfo("Loading data...")
+ */
+export const useErrorStore = defineStore("errors", {
+	state: () => ({
+		// Global error state
+		hasError: false,
+		lastError: null,
+
+		// API-specific errors
+		apiErrors: new Map(),
+
+		// Component-specific errors
+		componentErrors: {
+			dataTable: null,
+			form: null,
+			clients: null,
+			jobs: null,
+			timesheets: null,
+			warranties: null,
+			routes: null,
+		},
+
+		// Error history for debugging
+		errorHistory: [],
+
+		// Configuration
+		maxHistorySize: 50,
+		autoNotifyErrors: true,
+	}),
+
+	getters: {
+		// Check if any error exists
+		hasAnyError: (state) => {
+			return (
+				state.hasError ||
+				state.apiErrors.size > 0 ||
+				Object.values(state.componentErrors).some((error) => error !== null)
+			);
+		},
+
+		// Get error for a specific component
+		getComponentError: (state) => (componentName) => {
+			return state.componentErrors[componentName];
+		},
+
+		// Get error for a specific API call
+		getApiError: (state) => (apiKey) => {
+			return state.apiErrors.get(apiKey);
+		},
+
+		// Get recent errors
+		getRecentErrors:
+			(state) =>
+			(limit = 10) => {
+				return state.errorHistory.slice(-limit).reverse();
+			},
+	},
+
+	actions: {
+		// Set global error
+		setGlobalError(error, showNotification = true) {
+			this.hasError = true;
+			this.lastError = this._normalizeError(error);
+			this._addToHistory(this.lastError, "global");
+
+			if (showNotification && this.autoNotifyErrors) {
+				const notificationStore = useNotificationStore();
+				notificationStore.addError(this.lastError.message, "Global Error", {
+					duration: 5000,
+				});
+			}
+		},
+
+		// Set component-specific error
+		setComponentError(componentName, error, showNotification = true) {
+			const normalizedError = error ? this._normalizeError(error) : null;
+
+			if (this.componentErrors.hasOwnProperty(componentName)) {
+				this.componentErrors[componentName] = normalizedError;
+			} else {
+				this.componentErrors[componentName] = normalizedError;
+			}
+
+			if (normalizedError) {
+				this._addToHistory(normalizedError, `component:${componentName}`);
+
+				if (showNotification && this.autoNotifyErrors) {
+					const notificationStore = useNotificationStore();
+					notificationStore.addError(
+						normalizedError.message,
+						`${this._formatComponentName(componentName)} Error`,
+						{ duration: 5000 },
+					);
+				}
+			}
+		},
+
+		// Set API-specific error
+		setApiError(apiKey, error, showNotification = true) {
+			if (error) {
+				const normalizedError = this._normalizeError(error);
+				this.apiErrors.set(apiKey, normalizedError);
+				this._addToHistory(normalizedError, `api:${apiKey}`);
+
+				if (showNotification && this.autoNotifyErrors) {
+					const notificationStore = useNotificationStore();
+					notificationStore.addError(normalizedError.message, "API Error", {
+						duration: 6000,
+					});
+				}
+			} else {
+				this.apiErrors.delete(apiKey);
+			}
+		},
+
+		// Clear specific errors
+		clearGlobalError() {
+			this.hasError = false;
+			this.lastError = null;
+		},
+
+		clearComponentError(componentName) {
+			if (this.componentErrors.hasOwnProperty(componentName)) {
+				this.componentErrors[componentName] = null;
+			}
+		},
+
+		clearApiError(apiKey) {
+			this.apiErrors.delete(apiKey);
+		},
+
+		// Clear all errors
+		clearAllErrors() {
+			this.hasError = false;
+			this.lastError = null;
+			this.apiErrors.clear();
+			Object.keys(this.componentErrors).forEach((key) => {
+				this.componentErrors[key] = null;
+			});
+		},
+
+		// Handle API call errors with automatic error management
+		async handleApiCall(apiKey, apiFunction, options = {}) {
+			const {
+				showNotification = true,
+				retryCount = 0,
+				retryDelay = 1000,
+				onSuccess = null,
+				onError = null,
+			} = options;
+
+			// Clear any existing error for this API
+			this.clearApiError(apiKey);
+
+			let attempt = 0;
+			while (attempt <= retryCount) {
+				try {
+					const result = await apiFunction();
+
+					if (onSuccess) {
+						onSuccess(result);
+					}
+
+					return result;
+				} catch (error) {
+					attempt++;
+
+					if (attempt <= retryCount) {
+						// Wait before retry
+						await new Promise((resolve) => setTimeout(resolve, retryDelay));
+						continue;
+					}
+
+					// Final attempt failed
+					this.setApiError(apiKey, error, showNotification);
+
+					if (onError) {
+						onError(error);
+					}
+
+					throw error;
+				}
+			}
+		},
+
+		// Convenience method for handling async operations with error management
+		async withErrorHandling(operationKey, asyncOperation, options = {}) {
+			const { componentName = null, showNotification = true, rethrow = false } = options;
+
+			try {
+				const result = await asyncOperation();
+
+				// Clear any existing errors on success
+				if (componentName) {
+					this.clearComponentError(componentName);
+				}
+
+				return result;
+			} catch (error) {
+				if (componentName) {
+					this.setComponentError(componentName, error, showNotification);
+				} else {
+					this.setGlobalError(error, showNotification);
+				}
+
+				if (rethrow) {
+					throw error;
+				}
+
+				return null;
+			}
+		},
+
+		// Private helper methods
+		_normalizeError(error) {
+			if (typeof error === "string") {
+				return {
+					message: error,
+					type: "string_error",
+					timestamp: new Date().toISOString(),
+				};
+			}
+
+			if (error instanceof Error) {
+				return {
+					message: error.message,
+					name: error.name,
+					stack: error.stack,
+					type: "javascript_error",
+					timestamp: new Date().toISOString(),
+				};
+			}
+
+			// Handle API response errors
+			if (error && error.response) {
+				return {
+					message:
+						error.response.data?.message || error.response.statusText || "API Error",
+					status: error.response.status,
+					statusText: error.response.statusText,
+					data: error.response.data,
+					type: "api_error",
+					timestamp: new Date().toISOString(),
+				};
+			}
+
+			// Handle network errors
+			if (error && error.request) {
+				return {
+					message: "Network error - please check your connection",
+					type: "network_error",
+					timestamp: new Date().toISOString(),
+				};
+			}
+
+			// Fallback for unknown error types
+			return {
+				message: error?.message || "An unknown error occurred",
+				originalError: error,
+				type: "unknown_error",
+				timestamp: new Date().toISOString(),
+			};
+		},
+
+		_addToHistory(normalizedError, source) {
+			this.errorHistory.push({
+				...normalizedError,
+				source,
+				id: Date.now() + Math.random(),
+			});
+
+			// Trim history if it exceeds max size
+			if (this.errorHistory.length > this.maxHistorySize) {
+				this.errorHistory = this.errorHistory.slice(-this.maxHistorySize);
+			}
+		},
+
+		// Success notifications (convenience methods)
+		setSuccess(message, title = "Success", options = {}) {
+			if (this.autoNotifyErrors) {
+				const notificationStore = useNotificationStore();
+				notificationStore.addSuccess(message, title, options);
+			}
+		},
+
+		setWarning(message, title = "Warning", options = {}) {
+			if (this.autoNotifyErrors) {
+				const notificationStore = useNotificationStore();
+				notificationStore.addWarning(message, title, options);
+			}
+		},
+
+		setInfo(message, title = "Info", options = {}) {
+			if (this.autoNotifyErrors) {
+				const notificationStore = useNotificationStore();
+				notificationStore.addInfo(message, title, options);
+			}
+		},
+
+		// Configuration methods
+		setAutoNotifyErrors(enabled) {
+			this.autoNotifyErrors = enabled;
+		},
+
+		setMaxHistorySize(size) {
+			this.maxHistorySize = size;
+			if (this.errorHistory.length > size) {
+				this.errorHistory = this.errorHistory.slice(-size);
+			}
+		},
+
+		// Helper method to format component names nicely
+		_formatComponentName(componentName) {
+			return componentName
+				.split(/[-_]/)
+				.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(" ");
+		},
+	},
+});

frontend/src/stores/notifications-primevue.js

@@ -0,0 +1,186 @@
+import { defineStore } from "pinia";
+
+// Global toast instance - will be set during app initialization
+let toastInstance = null;
+
+export const useNotificationStore = defineStore("notifications", {
+	state: () => ({
+		// Configuration for PrimeVue Toast
+		defaultLife: 4000,
+		position: "top-right",
+	}),
+
+	getters: {
+		// Helper to check if toast is available
+		isToastAvailable: () => !!toastInstance,
+	},
+
+	actions: {
+		// Set the toast instance (called from main component)
+		setToastInstance(toast) {
+			toastInstance = toast;
+		},
+
+		// Core method to show notifications using PrimeVue Toast
+		addNotification(notification) {
+			if (!toastInstance) {
+				console.warn(
+					"Toast instance not available. Make sure to call setToastInstance first.",
+				);
+				return;
+			}
+
+			const toastMessage = {
+				severity: this.mapTypesToSeverity(notification.type || "info"),
+				summary: notification.title || this.getDefaultTitle(notification.type || "info"),
+				detail: notification.message || "",
+				life: notification.persistent ? 0 : (notification.duration ?? this.defaultLife),
+				group: notification.group || "main",
+			};
+
+			toastInstance.add(toastMessage);
+		},
+
+		// Convenience methods for different types of notifications
+		addSuccess(message, title = "Success", options = {}) {
+			this.addNotification({
+				type: "success",
+				title,
+				message,
+				...options,
+			});
+		},
+
+		addError(message, title = "Error", options = {}) {
+			this.addNotification({
+				type: "error",
+				title,
+				message,
+				duration: options.duration ?? 6000, // Errors stay longer by default
+				...options,
+			});
+		},
+
+		addWarning(message, title = "Warning", options = {}) {
+			this.addNotification({
+				type: "warn",
+				title,
+				message,
+				...options,
+			});
+		},
+
+		addInfo(message, title = "Info", options = {}) {
+			this.addNotification({
+				type: "info",
+				title,
+				message,
+				...options,
+			});
+		},
+
+		// Show API operation notifications
+		showApiSuccess(operation, message = null) {
+			const defaultMessages = {
+				create: "Item created successfully",
+				update: "Item updated successfully",
+				delete: "Item deleted successfully",
+				fetch: "Data loaded successfully",
+			};
+
+			this.addSuccess(
+				message || defaultMessages[operation] || "Operation completed successfully",
+			);
+		},
+
+		showApiError(operation, error, message = null) {
+			const defaultMessages = {
+				create: "Failed to create item",
+				update: "Failed to update item",
+				delete: "Failed to delete item",
+				fetch: "Failed to load data",
+			};
+
+			let errorMessage = message;
+			if (!errorMessage) {
+				if (typeof error === "string") {
+					errorMessage = error;
+				} else if (error?.response?.data?.message) {
+					errorMessage = error.response.data.message;
+				} else if (error?.message) {
+					errorMessage = error.message;
+				} else {
+					errorMessage = defaultMessages[operation] || "Operation failed";
+				}
+			}
+
+			this.addError(errorMessage);
+		},
+
+		// Configuration methods
+		setPosition(position) {
+			this.position = position;
+		},
+
+		setDefaultLife(life) {
+			this.defaultLife = life;
+		},
+
+		// Clear all notifications
+		clearAll() {
+			if (toastInstance) {
+				toastInstance.removeAllGroups();
+			}
+		},
+
+		// Utility method for handling async operations with notifications
+		async withNotifications(operation, asyncFunction, options = {}) {
+			const {
+				loadingMessage = "Processing...",
+				successMessage = null,
+				errorMessage = null,
+				showLoading = true,
+			} = options;
+
+			try {
+				if (showLoading) {
+					this.addInfo(loadingMessage, "Loading", { persistent: true });
+				}
+
+				const result = await asyncFunction();
+
+				if (successMessage !== false) {
+					this.showApiSuccess(operation, successMessage);
+				}
+
+				return result;
+			} catch (error) {
+				this.showApiError(operation, error, errorMessage);
+				throw error;
+			}
+		},
+
+		// Helper methods
+		mapTypesToSeverity(type) {
+			const mapping = {
+				success: "success",
+				error: "error",
+				warn: "warn",
+				warning: "warn",
+				info: "info",
+			};
+			return mapping[type] || "info";
+		},
+
+		getDefaultTitle(type) {
+			const titles = {
+				success: "Success",
+				error: "Error",
+				warn: "Warning",
+				warning: "Warning",
+				info: "Information",
+			};
+			return titles[type] || "Notification";
+		},
+	},
+});

frontend/src/stores/notifications.js

@@ -0,0 +1,272 @@
+import { defineStore } from "pinia";
+
+// Global toast instance - will be set during app initialization
+let toastInstance = null;
+
+export const useNotificationStore = defineStore("notifications", {
+	state: () => ({
+		// Configuration for PrimeVue Toast
+		defaultLife: 4000,
+		position: "top-right",
+	}),
+
+	getters: {
+		// Helper to check if toast is available
+		isToastAvailable: () => !!toastInstance,
+	},
+
+	actions: {
+		// Add a new notification
+		addNotification(notification) {
+			const newNotification = {
+				id: this.nextId++,
+				type: notification.type || "info", // info, success, warning, error
+				title: notification.title || "",
+				message: notification.message || "",
+				duration: notification.duration ?? this.defaultDuration,
+				persistent: notification.persistent || false, // If true, won't auto-dismiss
+				actions: notification.actions || [], // Array of action buttons
+				data: notification.data || null, // Any additional data
+				timestamp: new Date().toISOString(),
+				dismissed: false,
+				seen: false,
+			};
+
+			// Add to beginning of array (newest first)
+			this.notifications.unshift(newNotification);
+
+			// Trim notifications if we exceed max count
+			if (this.notifications.length > this.maxNotifications * 2) {
+				// Keep twice the max to maintain some history
+				this.notifications = this.notifications.slice(0, this.maxNotifications * 2);
+			}
+
+			// Auto-dismiss if not persistent
+			if (!newNotification.persistent && newNotification.duration > 0) {
+				setTimeout(() => {
+					this.dismissNotification(newNotification.id);
+				}, newNotification.duration);
+			}
+
+			return newNotification.id;
+		},
+
+		// Convenience methods for different types of notifications
+		addSuccess(message, title = "Success", options = {}) {
+			return this.addNotification({
+				type: "success",
+				title,
+				message,
+				...options,
+			});
+		},
+
+		addError(message, title = "Error", options = {}) {
+			return this.addNotification({
+				type: "error",
+				title,
+				message,
+				duration: options.duration ?? 6000, // Errors stay longer by default
+				...options,
+			});
+		},
+
+		addWarning(message, title = "Warning", options = {}) {
+			return this.addNotification({
+				type: "warning",
+				title,
+				message,
+				...options,
+			});
+		},
+
+		addInfo(message, title = "Info", options = {}) {
+			return this.addNotification({
+				type: "info",
+				title,
+				message,
+				...options,
+			});
+		},
+
+		// Dismiss a specific notification
+		dismissNotification(id) {
+			const notification = this.notifications.find((n) => n.id === id);
+			if (notification) {
+				notification.dismissed = true;
+			}
+		},
+
+		// Remove a notification completely
+		removeNotification(id) {
+			const index = this.notifications.findIndex((n) => n.id === id);
+			if (index !== -1) {
+				this.notifications.splice(index, 1);
+			}
+		},
+
+		// Mark notification as seen
+		markAsSeen(id) {
+			const notification = this.notifications.find((n) => n.id === id);
+			if (notification) {
+				notification.seen = true;
+			}
+		},
+
+		// Clear all notifications of a specific type
+		clearType(type) {
+			this.notifications = this.notifications.filter((n) => n.type !== type);
+		},
+
+		// Clear all notifications
+		clearAll() {
+			this.notifications = [];
+		},
+
+		// Clear all dismissed notifications
+		clearDismissed() {
+			this.notifications = this.notifications.filter((n) => !n.dismissed);
+		},
+
+		// Update notification content
+		updateNotification(id, updates) {
+			const notification = this.notifications.find((n) => n.id === id);
+			if (notification) {
+				Object.assign(notification, updates);
+			}
+		},
+
+		// Show a loading notification that can be updated
+		showLoadingNotification(message, title = "Loading...") {
+			return this.addNotification({
+				type: "info",
+				title,
+				message,
+				persistent: true,
+				actions: [],
+			});
+		},
+
+		// Update a loading notification to success
+		updateToSuccess(id, message, title = "Success") {
+			this.updateNotification(id, {
+				type: "success",
+				title,
+				message,
+				persistent: false,
+				duration: this.defaultDuration,
+			});
+
+			// Auto-dismiss after updating
+			setTimeout(() => {
+				this.dismissNotification(id);
+			}, this.defaultDuration);
+		},
+
+		// Update a loading notification to error
+		updateToError(id, message, title = "Error") {
+			this.updateNotification(id, {
+				type: "error",
+				title,
+				message,
+				persistent: false,
+				duration: 6000,
+			});
+
+			// Auto-dismiss after updating
+			setTimeout(() => {
+				this.dismissNotification(id);
+			}, 6000);
+		},
+
+		// Show API operation notifications
+		showApiSuccess(operation, message = null) {
+			const defaultMessages = {
+				create: "Item created successfully",
+				update: "Item updated successfully",
+				delete: "Item deleted successfully",
+				fetch: "Data loaded successfully",
+			};
+
+			return this.addSuccess(
+				message || defaultMessages[operation] || "Operation completed successfully",
+				"Success",
+			);
+		},
+
+		showApiError(operation, error, message = null) {
+			const defaultMessages = {
+				create: "Failed to create item",
+				update: "Failed to update item",
+				delete: "Failed to delete item",
+				fetch: "Failed to load data",
+			};
+
+			let errorMessage = message;
+			if (!errorMessage) {
+				if (typeof error === "string") {
+					errorMessage = error;
+				} else if (error?.response?.data?.message) {
+					errorMessage = error.response.data.message;
+				} else if (error?.message) {
+					errorMessage = error.message;
+				} else {
+					errorMessage = defaultMessages[operation] || "Operation failed";
+				}
+			}
+
+			return this.addError(errorMessage, "Operation Failed");
+		},
+
+		// Configuration methods
+		setPosition(position) {
+			this.position = position;
+		},
+
+		setDefaultDuration(duration) {
+			this.defaultDuration = duration;
+		},
+
+		setMaxNotifications(max) {
+			this.maxNotifications = max;
+		},
+
+		// Utility method for handling async operations with notifications
+		async withNotifications(operation, asyncFunction, options = {}) {
+			const {
+				loadingMessage = "Processing...",
+				successMessage = null,
+				errorMessage = null,
+				showLoading = true,
+			} = options;
+
+			let loadingId = null;
+
+			try {
+				if (showLoading) {
+					loadingId = this.showLoadingNotification(loadingMessage);
+				}
+
+				const result = await asyncFunction();
+
+				if (loadingId) {
+					this.updateToSuccess(
+						loadingId,
+						successMessage || `${operation} completed successfully`,
+					);
+				} else if (successMessage !== false) {
+					this.showApiSuccess(operation, successMessage);
+				}
+
+				return result;
+			} catch (error) {
+				if (loadingId) {
+					this.updateToError(loadingId, errorMessage || error.message);
+				} else {
+					this.showApiError(operation, error, errorMessage);
+				}
+				throw error;
+			}
+		},
+	},
+});