add notifiaction handling, error handling

frontend/documentation/INTEGRATED_ERROR_STORE.md

@@ -0,0 +1,131 @@
+# 🎉 Integrated Error Store with Automatic Notifications
+
+## What's New
+
+The error store now automatically creates PrimeVue Toast notifications when errors are set. **No need to import both stores anymore!**
+
+## ✅ Benefits
+
+- **Single Import**: Only import `useErrorStore`
+- **Automatic Notifications**: Error toasts appear automatically
+- **Cleaner Code**: Less boilerplate in components
+- **Consistent UI**: All notifications use PrimeVue Toast
+- **Better Organization**: All error handling in one place
+
+## 📖 Usage Examples
+
+### Before (Old Way)
+
+```javascript
+// Had to import both stores
+import { useErrorStore } from "@/stores/errors";
+import { useNotificationStore } from "@/stores/notifications-primevue";
+
+const errorStore = useErrorStore();
+const notificationStore = useNotificationStore();
+
+// Manual notification creation
+errorStore.setGlobalError(new Error("Something failed"));
+notificationStore.addError("Something failed"); // Had to do this manually
+```
+
+### After (New Way)
+
+```javascript
+// Only need one import
+import { useErrorStore } from "@/stores/errors";
+
+const errorStore = useErrorStore();
+
+// Automatic notification - toast appears automatically!
+errorStore.setGlobalError(new Error("Something failed"));
+```
+
+## 🛠️ Available Methods
+
+### Error Methods (Auto-create toasts)
+
+```javascript
+// Global errors
+errorStore.setGlobalError(new Error("System error"));
+
+// Component-specific errors
+errorStore.setComponentError("form", new Error("Validation failed"));
+
+// API errors
+errorStore.setApiError("fetch-users", new Error("Network error"));
+```
+
+### Convenience Methods (Direct notifications)
+
+```javascript
+// Success messages
+errorStore.setSuccess("Operation completed!");
+
+// Warnings
+errorStore.setWarning("Please check your input");
+
+// Info messages
+errorStore.setInfo("Loading data...");
+```
+
+### Disable Automatic Notifications
+
+```javascript
+// Set errors without showing toasts
+errorStore.setGlobalError(new Error("Silent error"), false);
+errorStore.setComponentError("form", new Error("Silent error"), false);
+```
+
+## 🔄 Migration Guide
+
+### Components Using Both Stores
+
+**Old Code:**
+
+```javascript
+import { useErrorStore } from "@/stores/errors";
+import { useNotificationStore } from "@/stores/notifications-primevue";
+
+const errorStore = useErrorStore();
+const notificationStore = useNotificationStore();
+
+// Show error
+errorStore.setGlobalError(error);
+notificationStore.addError("Failed to save");
+```
+
+**New Code:**
+
+```javascript
+import { useErrorStore } from "@/stores/errors";
+
+const errorStore = useErrorStore();
+
+// Error toast shown automatically!
+errorStore.setGlobalError(error);
+```
+
+### API Wrapper Updates
+
+The `ApiWithToast` wrapper has been updated to use only the error store. All existing usage remains the same, but now it's even simpler internally.
+
+## 🎯 What Changed Internally
+
+1. **Error Store**: Now imports `notifications-primevue` store
+2. **Automatic Calls**: Error methods automatically call toast notifications
+3. **Formatted Titles**: Component names are nicely formatted (e.g., "demo-component" → "Demo Component Error")
+4. **Convenience Methods**: Added `setSuccess()`, `setWarning()`, `setInfo()` methods
+5. **ApiWithToast**: Updated to use only error store
+6. **Demo Pages**: Updated to show single-store usage
+
+## 🧪 Testing
+
+Visit `/dev/error-handling-demo` to test:
+
+- All buttons now work with single error store
+- Automatic toast notifications
+- Error history still works
+- Component errors formatted nicely
+
+The notifications will appear in the top-right corner using PrimeVue Toast styling!