Improve the frontend

frontend/src/hooks/useAlertActions.ts

@@ -0,0 +1,71 @@
+/**
+ * useAlertActions Hook
+ * Provides contextual actions for alerts
+ */
+
+import { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { NotificationData } from './useNotifications';
+import { getContextualActions, type ContextualAction } from '../utils/alertHelpers';
+
+export interface UseAlertActionsReturn {
+  getActions: (alert: NotificationData) => ContextualAction[];
+  executeAction: (alert: NotificationData, action: ContextualAction) => void;
+}
+
+/**
+ * Hook to manage alert actions
+ */
+export function useAlertActions(): UseAlertActionsReturn {
+  const navigate = useNavigate();
+
+  const getActions = useCallback((alert: NotificationData): ContextualAction[] => {
+    return getContextualActions(alert);
+  }, []);
+
+  const executeAction = useCallback((alert: NotificationData, action: ContextualAction) => {
+    switch (action.action) {
+      case 'order_stock':
+        if (action.route) {
+          navigate(action.route);
+        }
+        break;
+
+      case 'plan_usage':
+        if (action.route) {
+          navigate(action.route);
+        }
+        break;
+
+      case 'schedule_maintenance':
+        if (action.route) {
+          navigate(action.route);
+        }
+        break;
+
+      case 'contact_customer':
+        // In a real app, this would open a communication modal
+        console.log('Contact customer for alert:', alert.id);
+        break;
+
+      case 'view_production':
+        if (action.route) {
+          navigate(action.route);
+        }
+        break;
+
+      case 'view_details':
+        // Default: expand the alert or navigate to details
+        console.log('View details for alert:', alert.id);
+        break;
+
+      default:
+        console.log('Unknown action:', action.action);
+    }
+  }, [navigate]);
+
+  return {
+    getActions,
+    executeAction,
+  };
+}