[ENHANCEMENT] Replace browser alert() with unified toast notification system across API error handling

[Prathvikmehra]

Description

The MedTrack frontend currently uses raw alert() dialogs for API error handling in HttpService.js for 401 and 403 responses. This blocks the browser thread, provides no visual consistency with the app's design, has no auto-dismiss behavior, supports no accessibility, and causes multiple alerts to stack if the user triggers multiple unauthorized actions.

Proposed Solution

Phase 1: Toast Notification Infrastructure

1. Create src/context/ToastContext.jsx with addToast(message, type, duration) and auto-dismiss logic
2. Create src/components/common/ToastContainer.jsx positioned top-right with Tailwind animations, role=alert, and aria-live=polite
3. Create src/hooks/useToast.js hook

Phase 2: Refactor HttpService.js

Replace alert() calls with an event emitter pattern that dispatches toast events. Create an EventTarget that HttpService uses to emit error events, and have App.jsx listen and show toast notifications.

Phase 3: Refactor Components

Replace remaining alert() calls in:

• Navbar.jsx (supplier order polling errors)
• LoginForm.jsx, RegisterForm.jsx, ForgotPasswordForm.jsx (form errors)
• EquipmentList.jsx (import/export errors)
• UpdateTask.jsx (signature save errors)
• All security panels with action confirmation dialogs

Phase 4: Loading & Empty States

Add LoadingSpinner, EmptyState (with icon + CTA), ErrorState (with retry button), and SkeletonLoader components for consistent async UX across all 70+ pages.

Files to Create/Modify

• src/context/ToastContext.jsx (new)
• src/components/common/ToastContainer.jsx (new)
• src/hooks/useToast.js (new)
• src/services/HttpService.js (refactor interceptors)
• src/App.jsx (wrap with ToastProvider, connect emitter)
• src/components/common/LoadingStates.jsx (new)
• src/components/common/ErrorState.jsx (new)
• src/components/common/EmptyState.jsx (new)
• src/components/common/SkeletonLoader.jsx (new)
• src/components/auth/LoginForm.jsx (replace alert())
• src/components/auth/RegisterForm.jsx (replace alert())
• src/components/common/Navbar.jsx (error handling)
• src/pages/hospital/EquipmentList.jsx (error handling)

Expected Impact

• Professional, accessible error UX
• No more browser thread-blocking alerts
• Consistent toast styling matches app design
• Screen-reader friendly notifications

Difficulty

Medium-Hard