enhancement(ui): standardize user-facing error feedback across admin workflows

RestroHub-FrontEnd/src/components/admin/Header.jsx

@@ -18,6 +18,7 @@ import { useAdminTheme } from '@context/AdminThemeContext';
 import profileService from '../../services/user/profileService';
 import useWebSocketNotifications from '@hooks/useWebSocketNotifications';
 import api from '../../services/common/api';
+import toast from 'react-hot-toast';
 
 const Header = ({ onMobileMenuClick, collapsed, onCollapseToggle }) => {
   const [searchOpen, setSearchOpen] = useState(false);
@@ -40,6 +41,7 @@ const Header = ({ onMobileMenuClick, collapsed, onCollapseToggle }) => {
     await api.post('/public/api/v1/auth/logout');  //handles logout on backend and invalidates refresh token
   } catch (error) {
     console.error('Logout API failed:', error);  //catches errors if API call breaks
+    toast.error('Logout API failed');
   } finally {
     localStorage.removeItem('accessToken');
     localStorage.removeItem('refreshToken');
@@ -79,6 +81,7 @@ const Header = ({ onMobileMenuClick, collapsed, onCollapseToggle }) => {
         });
       } catch (error) {
         console.error('Failed to fetch user for header:', error);
+        toast.error('Failed to fetch user for header');
       }
     };
     fetchUser();

RestroHub-FrontEnd/src/components/admin/dashboard/cards/LiveOrders.jsx

@@ -11,6 +11,7 @@ import {
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
 import { useAdminTheme } from '@context/AdminThemeContext';
+import toast from 'react-hot-toast';
 
 // ============================================
 // STATUS BADGE (Private to this file)
@@ -107,6 +108,7 @@ const LiveOrders = () => {
 
     } catch (err) {
       console.error('Failed to fetch orders:', err);
+      toast.error('Failed to fetch orders');
       setError('Failed to load orders');
       setOrders(fallbackOrders);
     } finally {

RestroHub-FrontEnd/src/components/admin/dashboard/cards/QuickActions.jsx

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import api from "@services/common/api";
 import { useAdminTheme } from '@context/AdminThemeContext';
+import toast from 'react-hot-toast';
 // import { useNavigate } from 'react-router-dom';  // if using react-router
 
 // ============================================
@@ -51,6 +52,7 @@ const QuickActions = () => {
       console.log('Navigate to new order page');
     } catch (err) {
       console.error('Failed to create order:', err);
+      toast.error('Failed to create order');
     } finally {
       setLoadingAction(null);
     }
@@ -68,6 +70,7 @@ const QuickActions = () => {
       console.log('All orders marked ready');
     } catch (err) {
       console.error('Failed to mark orders:', err);
+      toast.error('Failed to mark orders');
     } finally {
       setLoadingAction(null);
     }
@@ -91,6 +94,7 @@ const QuickActions = () => {
       console.log('WhatsApp broadcast sent');
     } catch (err) {
       console.error('Failed to send broadcast:', err);
+      toast.error('Failed to send broadcast');
     } finally {
       setLoadingAction(null);
     }
@@ -112,6 +116,7 @@ const QuickActions = () => {
       console.log('Report exported');
     } catch (err) {
       console.error('Failed to export report:', err);
+      toast.error('Failed to export report');
     } finally {
       setLoadingAction(null);
     }

RestroHub-FrontEnd/src/components/admin/dashboard/cards/RevenueChart.jsx

@@ -12,6 +12,7 @@ import {
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
 import { useAdminTheme } from '@context/AdminThemeContext';
+import toast from 'react-hot-toast';
 
 // ============================================
 // MAIN COMPONENT (Exported)
@@ -57,6 +58,7 @@ const RevenueChart = () => {
 
     } catch (err) {
       console.error('Failed to fetch revenue:', err);
+      toast.error('Failed to fetch revenue');
       setError('Failed to load chart');
       setData(fallbackData);
     } finally {

RestroHub-FrontEnd/src/components/admin/dashboard/cards/StatsSection.jsx

@@ -10,6 +10,7 @@ import {
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
 import { useAdminTheme } from '@context/AdminThemeContext';
+import toast from 'react-hot-toast';
 
 // ============================================
 // STAT CARD (Private to this file)
@@ -161,6 +162,7 @@ const StatsSection = () => {
 
   } catch (err) {
     console.error("Failed to fetch stats:", err);
+    toast.error("Failed to fetch stats");
     setError("Failed to load stats");
     setStats(fallbackStats);
   } finally {

RestroHub-FrontEnd/src/components/admin/kds/KitchenDisplaySystem.jsx

@@ -4,6 +4,7 @@ import SockJS from 'sockjs-client';
 import api from '@services/common/api';
 import KanbanBoard from './KanbanBoard';
 import { toast } from 'react-hot-toast';
+import toast from 'react-hot-toast';
 
 const KitchenDisplaySystem = () => {
   const [orders, setOrders] = useState([]);
@@ -54,6 +55,7 @@ const KitchenDisplaySystem = () => {
       oscillator.stop(audioContextRef.current.currentTime + 1);
     } catch (e) {
       console.error("Audio playback failed", e);
+      toast.error("Audio playback failed");
     }
   };
 
@@ -92,6 +94,7 @@ const KitchenDisplaySystem = () => {
         });
       }, (error) => {
         console.error('WebSocket error:', error);
+        toast.error('WebSocket error');
         setIsConnected(false);
         setTimeout(connectWebSocket, 5000);
       });

RestroHub-FrontEnd/src/components/admin/kds/OrderCard.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Clock, ChefHat, CheckCircle, AlertCircle } from 'lucide-react';
 import api from '@services/common/api';
+import toast from 'react-hot-toast';
 
 const OrderCard = ({ order, onStatusUpdate }) => {
   const [elapsedMinutes, setElapsedMinutes] = useState(0);
@@ -25,6 +26,7 @@ const OrderCard = ({ order, onStatusUpdate }) => {
       onStatusUpdate(order.orderId, newStatus);
     } catch (error) {
       console.error('Failed to update order status', error);
+      toast.error('Failed to update order status');
     } finally {
       setIsUpdating(false);
     }

RestroHub-FrontEnd/src/components/admin/marketing/qr/QRHeader.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Download, QrCode, Loader2 } from 'lucide-react';
+import toast from 'react-hot-toast';
 
 const QRHeader = () => {
   const [downloading, setDownloading] = useState(false);
@@ -12,6 +13,7 @@ const QRHeader = () => {
       console.log('Download all QRs');
     } catch (err) {
       console.error('Download failed:', err);
+      toast.error('Download failed');
     } finally {
       setDownloading(false);
     }

RestroHub-FrontEnd/src/components/admin/marketing/qr/QRPreview.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Download, Eye, Loader2 } from 'lucide-react';
 import QRCode from 'react-qr-code';
+import toast from 'react-hot-toast';
 
 const QRPreview = ({ qrColor, selectedStyle }) => {
   const [downloading, setDownloading] = useState(null);
@@ -21,6 +22,7 @@ const QRPreview = ({ qrColor, selectedStyle }) => {
       console.log('Download:', format);
     } catch (err) {
       console.error('Download failed:', err);
+      toast.error('Download failed');
     } finally {
       setDownloading(null);
     }

RestroHub-FrontEnd/src/components/admin/marketing/website/WebsiteHeader.jsx

@@ -13,6 +13,7 @@ const WebsiteHeader = ({ onSave }) => {
       console.log('Saved');
     } catch (err) {
       console.error('Save failed:', err);
+      toast.error('Save failed');
     } finally {
       setSaving(false);
     }

RestroHub-FrontEnd/src/components/admin/menu/Menus.jsx

@@ -43,6 +43,7 @@ const Menus = () => {
       setAllBranches(Array.isArray(branchList) ? branchList : []);
     } catch (err) {
       console.error('Failed to fetch branches:', err.response?.data || err);
+      toast.error('Failed to fetch branches');
       setAllBranches([]);
     }
   };

RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Copy, EyeOff, RefreshCw, Download, Loader2 } from 'lucide-react';
 import api from "@services/common/api";
+import toast from 'react-hot-toast';
 
 const BulkActions = ({ onRefresh }) => {
   const [loadingAction, setLoadingAction] = useState(null);
@@ -21,6 +22,7 @@ const BulkActions = ({ onRefresh }) => {
       onRefresh?.();
     } catch (err) {
       console.error('Failed to copy menu:', err);
+      toast.error('Failed to copy menu');
     } finally {
       setLoadingAction(null);
     }
@@ -38,6 +40,7 @@ const BulkActions = ({ onRefresh }) => {
       onRefresh?.();
     } catch (err) {
       console.error('Failed to hide items:', err);
+      toast.error('Failed to hide items');
     } finally {
       setLoadingAction(null);
     }
@@ -59,6 +62,7 @@ const BulkActions = ({ onRefresh }) => {
       console.log('Export menu');
     } catch (err) {
       console.error('Failed to export:', err);
+      toast.error('Failed to export');
     } finally {
       setLoadingAction(null);
     }

RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Dialog } from "@headlessui/react";
 import { X, Loader2, Tag, Type, FileText  } from "lucide-react";
 import api from "@services/common/api";
+import toast from 'react-hot-toast';
 
 const CategoryFormModal = ({ isOpen, onClose }) => {
   const [formData, setFormData] = useState({
@@ -36,6 +37,7 @@ const CategoryFormModal = ({ isOpen, onClose }) => {
 
     } catch (err) {
       console.error("Category create failed:", err.response?.data || err);
+      toast.error("Category create failed");
     } finally {
       setSubmitting(false);
     }

RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx

@@ -3,6 +3,7 @@ import { ChevronRight, RefreshCw, FolderPlus } from 'lucide-react';
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
 import { useAdminTheme } from '@context/AdminThemeContext';
+import toast from 'react-hot-toast';
 
 // ============================================
 // SKELETON (Private)
@@ -58,6 +59,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
       setAllCategories(response.data.data.content);
     } catch (err) {
       console.error('Failed to fetch categories:', err);
+      toast.error('Failed to fetch categories');
       setCategories(fallbackCategories);
       setAllCategories(fallbackCategories);
     } finally {

RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemsGrid.jsx

@@ -3,6 +3,7 @@ import { Search, RefreshCw, AlertCircle, UtensilsCrossed, ChevronLeft, ChevronRi
 import MenuItemCard from './FoodItemCard';
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
+import toast from 'react-hot-toast';
 
 const PAGE_SIZE = 9;
 
@@ -88,6 +89,7 @@ const MenuItemsGrid = forwardRef(({ selectedCategory, onEditItem }, ref) => {
       });
     } catch (err) {
       console.error('Failed to fetch menu:', err.response?.data || err);
+      toast.error('Failed to fetch menu');
       setError(err.response?.data?.message || 'Failed to load menu items');
       setMenuItems([]);
       setPageInfo({ totalElements: 0, totalPages: 0, first: true, last: true });

RestroHub-FrontEnd/src/components/admin/menu/menuCard/MenuFormModal.jsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { X, Loader2, ChevronDown, Tag, UtensilsCrossed, MapPin, FileText, Type } from 'lucide-react';
 import { Dialog } from '@headlessui/react';
 import api from "@services/common/api";
+import toast from 'react-hot-toast';
 
 const MenuCreation = ({ isOpen, onClose, editingMenu, allCategories, allBranches }) => {
     const [categories, setCategories] = useState([]);
@@ -119,6 +120,7 @@ const MenuCreation = ({ isOpen, onClose, editingMenu, allCategories, allBranches
             onClose();
         } catch (err) {
             console.error("Failed to save menu:", err.response?.data || err);
+            toast.error("Failed to save menu");
             const message = err.response?.data?.message
                 || err.response?.data?.error
                 || 'Failed to save menu. Please try again.';

RestroHub-FrontEnd/src/components/admin/menu/menuCard/MenusGrid.jsx

@@ -989,6 +989,7 @@ const MenusGrid = forwardRef(({ onEditMenu, onCreateMenu }, ref) => {
       setMenus(Array.isArray(menuList) ? menuList : []);
     } catch (err) {
       console.error('Failed to fetch menus:', err.response?.data || err);
+      toast.error('Failed to fetch menus');
       setError('Failed to load menus');
       setMenus([]);
     } finally {

RestroHub-FrontEnd/src/components/admin/orders/orderComponents/OrderCard.jsx

@@ -13,6 +13,7 @@ import {
   UtensilsCrossed,
 } from 'lucide-react';
 import api from "@services/common/api";
+import toast from 'react-hot-toast';
 
 const OrderCard = ({ order, onStatusUpdate }) => {
   const [updating, setUpdating] = useState(false);
@@ -164,6 +165,7 @@ const OrderCard = ({ order, onStatusUpdate }) => {
       onStatusUpdate(order.id, action.next);
     } catch (err) {
       console.error('Failed to update order:', err);
+      toast.error('Failed to update order');
     } finally {
       setUpdating(false);
     }

RestroHub-FrontEnd/src/components/admin/orders/orderComponents/OrdersGrid.jsx

@@ -3,6 +3,7 @@ import { RefreshCw, AlertCircle, ClipboardList } from 'lucide-react';
 import OrderCard from './OrderCard';
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
+import toast from 'react-hot-toast';
 
 // ============================================
 // MAIN COMPONENT
@@ -96,6 +97,7 @@ const OrdersGrid = ({ activeFilter, searchQuery, onOrdersChange }) => {
       syncOrders(fallbackOrders);
     } catch (err) {
       console.error('Failed to fetch orders:', err);
+      toast.error('Failed to fetch orders');
       setError('Failed to load orders');
       syncOrders(fallbackOrders);
     } finally {

RestroHub-FrontEnd/src/components/admin/profile/Profile.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import toast from 'react-hot-toast';
 
 import ProfileHeader from './profileComponents/ProfileHeader';
 import ProfileSidebar from './profileComponents/ProfileSidebar';
@@ -70,6 +71,7 @@ const Profile = () => {
           'Failed to fetch profile:',
           error
         );
+        toast.error('Failed to fetch profile');
 
       } finally {
 
@@ -118,6 +120,7 @@ const Profile = () => {
         'Failed to update profile:',
         error
       );
+      toast.error('Failed to update profile');
     }
   };
 

RestroHub-FrontEnd/src/components/admin/profile/profileComponents/ProfileImageModal.jsx

@@ -2,6 +2,7 @@ import { useState, useRef } from 'react';
 import { X, Upload, Loader2, Camera, Trash2 } from 'lucide-react';
 import { Dialog } from '@headlessui/react';
 import profileService from '../../../../services/user/profileService';
+import toast from 'react-hot-toast';
 
 const ProfileImageModal = ({ isOpen, onClose, currentImage, onSave }) => {
   const [preview, setPreview] = useState(null);
@@ -32,6 +33,7 @@ const ProfileImageModal = ({ isOpen, onClose, currentImage, onSave }) => {
       setPreview(null);
     } catch (err) {
       console.error('Upload failed:', err);
+      toast.error('Upload failed');
     } finally {
       setUploading(false);
     }

RestroHub-FrontEnd/src/components/admin/profile/profileComponents/RestaurantInfoCard.jsx

@@ -9,6 +9,7 @@ import {
   Facebook,
 } from 'lucide-react';
 import api from '../../../../services/common/api';
+import toast from 'react-hot-toast';
 
 const RestaurantInfoCard = ({ profile, onSave }) => {
   const [editing, setEditing] = useState(false);
@@ -83,6 +84,7 @@ const RestaurantInfoCard = ({ profile, onSave }) => {
       setEditing(false);
     } catch (err) {
       console.error('Save failed:', err);
+      toast.error('Save failed');
     } finally {
       setSaving(false);
     }